SwfitUI: Use .blur cause navigation title overlap with safe area

Question

I want to blur the app when it's in the background so I have this in my TestApp.swift

import SwiftUI

@main
struct TestApp: App {
    @Environment(\.scenePhase) var scenePhase
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .blur(radius: scenePhase != .active ? 200 : 0)
        }
    }
}

For the ContentView.swift I have a TabView where each tab is a NavigationStack

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                List {
                    Text("(a)")
                    Text("(b)")
                    Text("(c)")
                }
                .navigationTitle("AAA")
                .navigationBarTitleDisplayMode(.inline)
            }
            .tabItem{Text("a") }
            .tag("a")
            NavigationStack {
                List {
                    Text("b")
                    Text("b")
                    Text("b")
                }
                .navigationTitle("BBBB")
                .navigationBarTitleDisplayMode(.inline)
            }
            .tabItem{Text("b")}
            .tag("b")
        }
    }
}

However, when switch the app between foreground and background, the navigation title will overlap with upper safe area. I have to tap the safe area for it to fix it self. How can I fix this?

Thanks.

Answer 1

You can try to add a frame to the TabView with screen width and height:

TabView {
    //your code
}
.frame(
    width: UIScreen.main.bounds.width,
    height: UIScreen.main.bounds.height
)

Pic: