Issue with Margin During Navigation Transition in iOS 18+

The new .navigationTransition feature introduced in SwiftUI for iOS 18+ offers an impressive animated screen transition. However, during the transition, the parent view shrinks, leaving a white margin (or black in dark mode) around the edges.

If the background color of the parent view matches this margin color, it appears seamless. However, as shown in the attached example, when using a custom color or gradient background, the margin becomes visually disruptive.

Is there a way to address this?

import SwiftUI

struct ContentView: View {
    @Namespace var namespace
    var body: some View {
        NavigationStack {
            Form {
                NavigationLink {
                    ZStack {
                        Color.yellow.ignoresSafeArea()
                        Text("Detail View")
                    }
                    .navigationTitle("Transition")
                    .navigationTransition(.zoom(sourceID: "hellow", in: namespace))
                } label: {
                    Text("Open")
                        .font(.largeTitle)
                        .matchedTransitionSource(id: "hellow", in: namespace)
                }

            }
            .scrollContentBackground(.hidden)
            .background(Color.mint.ignoresSafeArea())
        }
    }
}

#Preview {
    ContentView()
}

Applying .ignoreSafeArea() to the background view doesn’t seem to resolve the issue, which suggests this margin might not be related to the safe area. Any insights or solutions would be greatly appreciated.

Answered by max_us in 812304022

Someone suggested solving it by setting negative padding on the background view, and I was able to resolve it using this method too!

Accepted Answer

Someone suggested solving it by setting negative padding on the background view, and I was able to resolve it using this method too!

Issue with Margin During Navigation Transition in iOS 18+
 
 
Q