Zoom transition source tile lags after back navigation when LazyVGrid is scrolled immediately

Question

Created 6h

Replies 0

Boosts 0

Participants 1

[Submitted as FB21961572]

When navigating from a tile in a scrolling LazyVGrid to a child view using .navigationTransition(.zoom) and then returning, the source tile can lag behind the rest of the grid if scrolling starts immediately after returning.

The lag becomes more pronounced as tile content gets more complex; in this simplified sample, it can seem subtle, but in production-style tiles (as used in both of my apps), it is clearly visible and noticeable.

This may be related to another issue I recently filed:

Source item disappears after swipe-back with .navigationTransition(.zoom)

CONFIGURATION

Platform: iOS Simulator and physical device
Navigation APIs: matchedTransitionSource + navigationTransition(.zoom)
Container: ScrollView + LazyVGrid
Sample project: ZoomTransition (DisappearingTile).zip

REPRO STEPS

Create a new iOS project and replace ContentView with the code below.
Run the app in sim or physical device
Tap any tile in the scrolling grid to navigate to the child view.
Return to the grid (back button or edge swipe).
Immediately scroll the grid.
Watch the tile that was just opened.

EXPECTED

All tiles should move together as one coherent scrolling grid, with no per-item lag or desynchronization.

ACTUAL

The tile that was just opened appears to trail behind neighboring tiles for a short time during immediate scrolling after returning.

MINIMAL CODE SAMPLE

import SwiftUI

struct ContentView: View {
    @Namespace private var namespace

    private let tileCount = 40
    private let columns = [GridItem(.adaptive(minimum: 110), spacing: 12)]

    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 12) {
                    ForEach(0..<tileCount, id: \.self) { index in
                        NavigationLink(value: index) {
                            RoundedRectangle(cornerRadius: 16)
                                .fill(color(for: index))
                                .frame(height: 110)
                                .overlay(alignment: .bottomLeading) {
                                    Text("\(index + 1)")
                                        .font(.headline)
                                        .foregroundStyle(.white)
                                        .padding(10)
                                }
                                .matchedTransitionSource(id: index, in: namespace)
                        }
                        .buttonStyle(.plain)
                    }
                }
                .padding(16)
            }
            .navigationTitle("Zoom Transition Grid")
            .navigationSubtitle("Open tile, go back, then scroll immediately")
            .navigationDestination(for: Int.self) { index in
                Rectangle()
                    .fill(color(for: index))
                    .ignoresSafeArea()
                    .navigationTransition(.zoom(sourceID: index, in: namespace))
            }
        }
    }

    private func color(for index: Int) -> Color {
        let hue = Double(index % 20) / 20.0
        return Color(hue: hue, saturation: 0.8, brightness: 0.9)
    }
}

SCREEN RECORDING

Boost