iOS 26 ScrollView with static background image

I need a layout where I have a ScrollView with some content, and ScrollView has full screen background image. Screen is pushed as detail on stack. When my screen is pushed we display navigation bar. We want a new scrollEdgeEffectStyle .soft style work. But when we scroll the gradient blur effect bellow bars is fixed to top and bottom part of the scroll view background image and is not transparent. However when content underneath navigation bar is darker and navigation bar changes automatically to adapt content underneath the final effect looks as expected doesn't use background image.

Expected bahaviour for us is that the effect under the navigation bar would not use background image but would be transparent based on content underneath.

This is how it is intialy when user didn't interact with the screen:

This is how it looks when user scrolls down:

This is how it looks when navigation bar adapts to dark content underneath:

Minimal code to reproduce this behaviour:

import SwiftUI

@main
struct SwiftUIByExampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                VStack(spacing: 0.0) {
                    ForEach(1 ..< 101, id: \.self) { i in
                        HStack {
                            Text("Row \(i)")

                            Spacer()
                        }
                        .frame(height: 50)
                        .background(Color.random)
                    }
                }
            }
            .scrollEdgeEffectStyle(.soft, for: .all)
            .scrollContentBackground(.hidden)
            .toolbar {
                ToolbarItem(placement: .title) {
                    Label("My Awesome App", systemImage: "sparkles")
                        .labelStyle(.titleAndIcon)
                }
            }
            .toolbarRole(.navigationStack)
            .background(
                ZStack {
                    Color.white
                        .ignoresSafeArea()

                    Image(.sea)
                        .resizable()
                        .ignoresSafeArea()
                        .scaledToFill()
                }
            )
        }
    }
}

extension Color {
    
    static var random: Color {
        Color(
            red: .random(in: 0...1),
            green: .random(in: 0...1),
            blue: .random(in: 0...1)
        )
    }
}

We've also tried using ZStack instead of .background modifier but we observed the same results.

We want to basically achieve the same effect as showcased here, but with the static background image:

https://youtu.be/3MugGCtm26A?si=ALG29NqX1jAMacM5&t=634