HomeiOS DevelopmentUndesirable bouncy animation in scrollview/grid after iOS 18 navigationTransition zoom

Undesirable bouncy animation in scrollview/grid after iOS 18 navigationTransition zoom


I am implementing the brand new iOS 18 .navigationTransition(.zoom) function with a grid of things that open in a full-screen cowl. Every part works nice, however I am experiencing two points after dismissing the element view:

Subject 1: Bouncy animation when scrolling

After I dismiss the element view after which scroll, the matched merchandise has an undesirable bouncy/spring animation. I would wish to take away this animation solely.

Subject 2: Including nook radius clips the view

If I add a nook radius to my grid gadgets (.cornerRadius(12)), the view will get clipped when scrolling after dismissing the element view.

bouncy impact : Undesirable bouncy animation in scrollview/grid after iOS 18 navigationTransition zoom

minimize impact : cut

In my code I exploit photos and extra advanced views, right here it is simply pink rectangles.

This is my minimal reproducible instance:

  import SwiftUI

  struct TestItem: Identifiable {
      let id: Int
  }

  @Observable
  closing class TestViewModel {
      var selectedItem: TestItem?
      var transitionID: String?

      let gadgets = (0..<10).map { TestItem(id: $0) }

      func selectItem(_ merchandise: TestItem) {
          selectedItem = merchandise
          transitionID = "item-(merchandise.id)"
      }

      func dismiss() {
          selectedItem = nil
          transitionID = nil
      }
  }

  struct TestView: View {
      @State personal var viewModel = TestViewModel()
      @Namespace personal var namespace

      var physique: some View {
          ScrollView {
              LazyVGrid(columns: [
                  GridItem(.flexible()),
                  GridItem(.flexible())
              ], spacing: 16) {
                  ForEach(viewModel.gadgets) { merchandise in
                      rectangleButton(for: merchandise)
                          // .cornerRadius(12) // ← Uncomment to see clipping difficulty
                  }
              }
              .padding()
          }
          .fullScreenCover(merchandise: $viewModel.selectedItem) { merchandise in
              if let transitionID = viewModel.transitionID {
                  detailView(for: merchandise)
                      .navigationTransition(.zoom(sourceID: transitionID, in: namespace))
              }
          }
      }

      @ViewBuilder
      personal func rectangleButton(for merchandise: TestItem) -> some View {
          Button {
              viewModel.selectItem(merchandise)
          } label: {
              Rectangle()
                  .fill(Shade.pink)
                  .body(top: 150)
          }
          .matchedTransitionSource(id: "item-(merchandise.id)", in: namespace)
      }

      personal func detailView(for merchandise: TestItem) -> some View {
          ZStack {
              Rectangle()
                  .fill(Shade.pink)
                  .ignoresSafeArea()

              VStack {
                  HStack {
                      Spacer()
                      Button("Shut") {
                          viewModel.dismiss()
                      }
                      .padding()
                  }
                  Spacer()
              }
          }
      }
  }

Steps to breed:

  1. Faucet any pink rectangle
  2. Shut the element view
  3. Scroll the grid → The beforehand chosen merchandise bounces/springs
  4. Uncomment .cornerRadius(12) and repeat → The corners are clipped throughout scroll

Anticipated habits: No animation when scrolling after dismiss, and nook radius ought to stay intact.

Surroundings: iOS 26.0, Xcode 26.0

Has anybody encountered this? Is there a solution to disable the bouncy animation or repair the nook radius clipping?

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments