I'm targeting iOS 26+ and I can't get a consistent fade/blur effect on the top edge of the screen behind the navigation title bar when scrolling up in a tabView, which should actually happen by default from my understanding.

I'm attaching here the code for a minimum reproducible example and a gif that displays the bug, basically the view loads correctly (you can see the fade/blur taking place at the top) but as soon as I start scrolling something glitches and the effect gets replaced by a hard cut.

Can anyone help me understand where I'm going wrong?

struct CardsExample: View {
    
    @State private var currentPage = 0
    let pages = [1...10]
    let colors: [Color] = [.red, .green, .blue, .yellow, .cyan, .mint, .orange, .purple, .indigo]
    private let columns = [
        GridItem(.flexible(), spacing: 16),
        GridItem(.flexible(), spacing: 16),
    ]
    
    var body: some View {
        NavigationStack {
            TabView(selection: $currentPage) {
                ForEach(pages, id: \.self) { month in
                    ScrollView(.vertical) {
                        LazyVGrid(columns: columns, spacing: 16) {
                            ForEach(colors, id: \.self) { color in
                                RoundedRectangle(cornerRadius: 15)
                                    .fill(color)
                                    .frame(height: 200)
                            }
                        }
                        .padding(.horizontal)
                        .padding(.top, 7)
                    }
                    .scrollIndicators(.hidden)
                    .tag(month)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .ignoresSafeArea()
            .navigationTitle("Title")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}