Skip to content

View Stuck in background during transitions in a nav stack with glass backgrounds

FB19016414: Unsmooth transition in a NavigationStack inside a .sheet when mixing glass and non-glass backgrounds

When a view with a glass background transitions in over a view with an opaque background in a NavigationStack inside a .sheet, sometimes the view with the opaque background stops moving / stays visible during the transition and then disappears in an instant at the end, leading to a very unsmooth transition.

Still happening in Beta 8. This happens mostly when going back and forth in the nav stack. Steps to reproduce: Use the attached example code, go to the list of cities, select a city, go back, select another city -> you'll see the issue.

Example code:

swift
// » SwiftUI Garden
// » https://swiftui-garden.com/Misc/iOS-26/View-Stuck-in-background-during-transitions-in-a-nav-stack-with-glass-backgrounds

import MapKit
import SwiftUI

struct StuckViewInBackgroundDuringNavStackTransitionExample: View {
    var body: some View {
        Map()
            .sheet(isPresented: .constant(true)) {
                StuckBgMainView()
                    .presentationDetents([.medium, .large])
                    .presentationBackgroundInteraction(.enabled)
                    .interactiveDismissDisabled()
            }
    }
}

struct City: Identifiable, Hashable {
    var id: String { name }
    let name: String
}

enum NavTarget: Hashable {
    case cities
}

struct StuckBgMainView: View {
    var body: some View {
        NavigationStack {
            ScrollView([.vertical]) {
                NavigationLink(value: NavTarget.cities) {
                    Text("Cities")
                }
            }
            .navigationTitle("Example")
            .navigationBarTitleDisplayMode(.inline)
            .containerBackground(Color.clear, for: .navigation)
            .navigationDestination(for: NavTarget.self) { navTarget in
                switch navTarget {
                case .cities:
                    CitiesListView()
                }
            }
            .navigationDestination(for: City.self) { city in
                CityView(city: city)
            }
        }
    }
}

struct CitiesListView: View {
    var cities: [City] = [
        "New York",
        "London",
        "Tokyo",
        "Paris",
        "Sydney",
        "Berlin",
        "Moscow",
        "Cairo",
        "Mumbai",
        "São Paulo",
        "Toronto",
        "Dubai",
        "Singapore",
        "Bangkok",
        "Rome",
        "Madrid",
        "Los Angeles",
        "Chicago",
        "Mexico City",
        "Buenos Aires",
    ].map { City(name: $0) }

    var body: some View {
        List(cities) { city in
            VStack(alignment: .leading) {
                NavigationLink(value: city) {
                    Text(city.name)
                }
            }
        }
        .listStyle(.plain)
        .navigationTitle("Cities")
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct CityView: View {
    let city: City
    var body: some View {
        ScrollView(.vertical) {
            Text("Hello")
        }
        .navigationTitle(city.name)
        .navigationBarTitleDisplayMode(.inline)
        .containerBackground(Color.clear, for: .navigation)
    }
}

#Preview {
    StuckViewInBackgroundDuringNavStackTransitionExample()
}