In the small example below, I have set .preferredColorScheme(.dark). I am pushing a view that has a List. I have a custom background color.
When .scrollEdgeEffectStyle(.hard, for: .all) is used, the pushed view top and bottom safe areas flash black before being replaced by the blue background color.
If I change this to .scrollEdgeEffectStyle(.soft, for: .all), the issue goes away.
If I do not set preferredColorScheme(.dark), the issue also goes away.
I filled FB18465023, but wonder if I am just doing something wrong? Video of sample running: https://www.youtube.com/shorts/87rWqHtdmKw.
var body: some View {
NavigationStack {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
NavigationLink("Push New View") {
PushedView()
}
.buttonStyle(.glass)
.padding()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.ignoresSafeArea(.all)
.background(.blue)
}
.preferredColorScheme(.dark)
}
}
struct PushedView: View {
@State private var searchText = ""
var body: some View {
List {
ForEach(1...30, id: \.self) { index in
Label("Label \(index)", systemImage: "number.circle")
.listRowBackground(Color.blue)
}
}
// This causes the top and bottom safe areas to start off black before
// getting the blue background from below
.scrollEdgeEffectStyle(.hard, for: .all)
// This does not have the issue
// .scrollEdgeEffectStyle(.hard, for: .all)
.listStyle(.plain)
.background(.blue)
.searchable(text: $searchText, prompt: "Search labels...")
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Button("Toolbar Button", systemImage: "questionmark") {
print("touched")
}
}
}
}
}
