2

My application uses a TabView and contained in it there is a NavigationView so I can transition to different views on the selected tabs. I am using .navigationTitle together with .navigationBarTitleDisplayMode(.large) to show users where they are (in the example below the title is set to "Pfizer"). All is working fine as you can see below:

Screenshot when TabView/NavigationView are used without a ZStack around it

    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                ...

However, as soon as I put a ZStack around the TabView (or use .overlay) the entire views including the navigation header move up into the safe area even though I have not specified an .ignoresSafeArea anywhere! Here is how it looks like when I am using ZStack around it:

Screenshot when ZStack/TabView/NavigationView are all nested

    var body: some View {
        ZStack(alignment: .center) {
            TabView(selection: $selectedTab) {
                NavigationView {
                    ...

Note that I intend to use ZStack to conditionally show a view on top of my TabView/NavigationView as follows:

    @Binding var condition: Bool

    var body: some View {
        ZStack(alignment: .center) {
            TabView(selection: $selectedTab) {
                NavigationView {
                    ...
               }
            }
            .blur(radius: condition ? 3 : 0)
            if condition {
                VStack {
                    VStack(alignment: .center) {
                        Text("Some text")
                            .font(.title2).padding(.bottom)
                    }
                    .padding()
                    .background(Color(.secondarySystemBackground))
                }
                .padding(.horizontal, 40)
            }
        }
    }

I managed to figure out by trial and error that the problem only occurs if I am using the .blur view modifier on the TabView that is inside the ZStack. If I remove the .blur view modifier, then the problem that I described does not occur and so the initial comment of Asperi makes sense.

I do not understand this behavior and I have no idea why using .blur messes up the safe area. Can anybody explain this behavior to me please?

Simon
  • 41
  • 5
  • Works fine with Xcode 13.1 / iOS 15.1 – Asperi Dec 08 '21 at 14:36
  • I verified that I am using Xcode 13.1 / iOS 15.1, still I do have that problem as described above. – Simon Dec 08 '21 at 15:02
  • I figured out using trial and error that the problem I observed only occurs when I am using the .blur view modifier. That's the reason why Asperi was not able to reproduce the problem. Still, I do not understand it. – Simon Dec 08 '21 at 16:46
  • I have this exact same problem. Why does adding .blur() mess with the safe area? I only have this problem if I apply .blur() to a TabView – Bjørn Olav Jalborg Jul 12 '22 at 07:57
  • Same problem still exists (blur on NavigationView). Did somebody find a workaround? – HeGe Jul 28 '22 at 19:25
  • Hi, I ran into the same situation today. Did you figure out how to keep the same safearea (in my case, safearea top gets messes up when I use Zstack, TaView and .blur... – Yuuu Aug 03 '23 at 06:38

0 Answers0