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.