List view destroys Tab Bar in SwiftUI 3 on iOS 15.0

I have a TabView in my app. One of the tabs contains a screen with a List view. No matter what content or .listStyle I try to apply, the List messes up the tab bar: The divider line disappears immediately and then, when the user goes to a different tab, depending on that content, it either restores/fixes the tab bar, so it looks normal again, or it remains messed up in a sense that only the currently active tab icon + label are visibly in the foreground. The blurred background of the tab bar and the other icons are either invisible or too far in the background, i.e. the content of the tab screen goes in front of the tab icons. The tab bar is expected to always be above the screen contents, even if the screen uses .ignoresSafeArea().

I also tried manually setting .zIndex(1) on various views.

Everything worked perfectly fine with iOS 14.x, but since upgrading to iOS 15 this weird bug appeared.

Example project:

import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        TabView {
            screen1.tabItem {
                Image(systemName: "1.square.fill")
                Text("Tab 1")
            }
            .tag(1)
            .navigationViewStyle(StackNavigationViewStyle())
            
            screen2.tabItem {
                Image(systemName: "2.square.fill")
                Text("Tab 2")
                
            }.tag(2)
            
            screen3.tabItem {
                Image(systemName: "3.square.fill")
                Text("Tab 3")
            }.tag(3)
        }
    }
    
    var screen1: some View {
        ScrollView {
            VStack {
                ForEach(1..<80) { index in
                    Text("Line \(index)")
                }
            }
            .frame(maxWidth: .infinity)
        }
    }
    
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 0, longitude: 0), span: MKCoordinateSpan(latitudeDelta: 1, longitudeDelta: 1))
    
    var screen2: some View {
        Map(coordinateRegion: $region)
            .ignoresSafeArea()
    }
    
    var screen3: some View {
        List {
            Text("List Item")
        }
    }
}
Answered by NickZ in 688681022

I finally found out, this is a (unfortunately buggy) new "feature", which is enabled by default, can be disabled by manually calling UITabBar.appearance().scrollEdgeAppearance = UITabBarAppearance.init(idiom: .unspecified) before the TabView gets initialised.

Added thought: It may have to do with the auto-disappearing background and divider line in some circumstances like when scrolled to the bottom or, in case of a List view, the content fits into one screen without scrolling. This should not happen in my opinion. No other (Apple) app in iOS 15 has this behaviour.

Accepted Answer

I finally found out, this is a (unfortunately buggy) new "feature", which is enabled by default, can be disabled by manually calling UITabBar.appearance().scrollEdgeAppearance = UITabBarAppearance.init(idiom: .unspecified) before the TabView gets initialised.

Thank you for sharing your solution. I ran into this bug today and spent hours trying to debug it. I just added a tab view controller to my app and one of the tabs is a hosting view controller that hosts a SwiftUI map which ignores all safe edges. When this map tab was selected, the only part of the tab view that was visible was the selected/current tab. I would have wasted a lot more time trying to debug this without your suggestion.

List view destroys Tab Bar in SwiftUI 3 on iOS 15.0
 
 
Q