Hi everyone, I’m building a SwiftUI app using NavigationStack and running into a weird nav bar issue.
For the setup I have a 'home' screen with a vertical ScrollView and a large edge-to-edge header that extends under the top safe area (using .ignoresSafeArea(edges: .top)). I also have a 'detail' screen with a similar immersive layout, where the header/poster image sits at the top and the ScrollView also extends under the top area.
I’m using the native navigation bar on both screens and default back button, not a custom nav bar, and I’m not manually configuring UINavigationBarAppearance, I'm just relying on SwiftUI’s default/automatic toolbar behavior.
The problem I’m facing is when I push from home to the detail screen, the top nav area briefly flickers and shows the system navigation bar/material background (white in light mode, black in dark mode). It’s clearly the system material, not the poster/image underneath. The screen initially renders with that nav bar state (white/dark), and only after I start scrolling does it correct itself and visually align with the header/background behind it.
What I'm thinking is that maybe the detail screen initially renders with systemBackground, so the nav bar uses its default (standard) appearance on the first frame, and only after layout/interaction, once the image-derived background settles, does it switch to the correct scroll-edge/transparent style.
One important thing, if I hide the nav bar on the detail screen using .toolbar(.hidden, for: .navigationBar), the issue disappears completely. So this seems specifically tied to the native nav bar’s initial render/appearance timing during the push, rather than just the layout or image loading. I’d prefer to keep the native nav bar and back button rather than implement a custom approach.
Has anyone faced this issue before, or is there a correct way to structure edge-to-edge content under the nav bar so it renders properly on first push?
Video of the issue: https://imgur.com/a/OYHtYbp
NavigationStack {
ScrollView {
HeroView()
}
.ignoresSafeArea(edges: .top)
.navigationTitle("Cinema")
.toolbarTitleDisplayMode(.inlineLarge)
.toolbarBackgroundVisibility(.automatic, for: .navigationBar)
.navigationDestination(for: Route.self) { route in
DetailView(movie: route.movie)
}
}
var body: some View {
ScrollView {
HeaderPosterView()
}
.ignoresSafeArea(edges: .top)
.navigationBarTitleDisplayMode(.inline)
.toolbarBackgroundVisibility(.automatic, for: .navigationBar)
}
}