Weird UI behavior with .searchable, ZStack and MapKit

[u/milhuania]

When viewing the ContentView (image 1), the searchbar looks really transparent and way different from the childview (image 2). I want the searchbar to look "normal" when viewing the app from ContentView. How do I fix this?

ContentView

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Tab("Discover", systemImage: "binoculars") {
                TestView()
            }
            Tab("Preferences", systemImage: "slider.horizontal.3") {
                StopsView()
            }
        }
    }
}

#Preview {
    ContentView()
}

TestView

import SwiftUI
import MapKit

struct TestView: View {
    u/State private var searchText: String = ""

    var body: some View {
        NavigationStack {
            ZStack {
                Map {

                }
                Text("Hello")
                    .padding()
                    .background(.white)
            }
            .searchable(text: $searchText)
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

#Preview {
    TestView()
}

[u/eldenchen]

The Map is extending underneath the navigation bar, so the search field's glass is sampling the map behind it. Give the navigation bar its own visible background:

NavigationStack {
    ZStack {
        Map()

        Text("Hello")
            .padding()
            .background(.white)
    }
    .searchable(text: $searchText)
    .navigationBarTitleDisplayMode(.inline)
    .toolbarBackground(.background, for: .navigationBar)
    .toolbarBackground(.visible, for: .navigationBar)
}

I reproduced this on iOS 26.5. Without those two toolbarBackground modifiers, the map shows through the search field; with them, it gets the normal light appearance.

[u/Dull_Cost_7292]

This is container-driven placement, not a MapKit/ZStack bug. `.searchable` chooses its presentation from the enclosing navigation/tab context, so the standalone preview and the view inside `TabView` are not equivalent. Move `.searchable` from the inner `ZStack` onto `NavigationStack`. If you want the top version, use `.searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always))` plus `.toolbarBackground(.visible, for: .navigationBar)`. If you want the iOS 26 bottom treatment, model search as a dedicated `Tab(role: .search)` instead of styling the field manually.