哈哈，这个问题我在适配iOS26的WebView时也踩过同款坑！SwiftUI自带的safeAreaPadding、ignoresSafeArea这类修饰符对WKWebView这种UIKit桥接组件的生效逻辑确实有点绕，直接用往往达不到预期效果。下面给你两个方案，分别对应你“退而求其次”和“追平Safari体验”的需求：

方案一：固定顶部背景（最简单的兜底方案） #

如果你只是想让状态栏区域始终有一个纯色背景挡住WebView内容，不用管滚动效果，直接用一个占位色块占满顶部安全区就行：

import SwiftUI
import WebKit

struct ContentView: View {
    // 存储顶部安全区高度（包含灵动岛的高度）
    @State private var topSafeAreaHeight: CGFloat = 0
    
    var body: some View {
        VStack(spacing: 0) {
            // 用系统背景色填充顶部安全区，挡住WebView内容
            Color(.systemBackground)
                .frame(height: topSafeAreaHeight)
            
            // 加载WebView
            WebView(url: URL(string: "https://webkit.org")!)
        }
        // 让整个布局忽略系统安全区，避免WebView被额外挤压
        .ignoresSafeArea()
        .onAppear {
            // 获取当前设备的顶部安全区高度
            topSafeAreaHeight = UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0
        }
    }
}

// 标准的WKWebView桥接实现
struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.load(URLRequest(url: url))
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {}
}

这个方案的逻辑很直白：用和系统背景一致的色块占住顶部安全区，WebView在下面铺满剩余空间，不管怎么滚动，顶部都不会透出WebView的内容，完全满足你“兜底”的需求。

方案二：实现类Safari的动态滚动效果（追平原生体验） #

如果想模仿Safari那种“初始时顶部纯色遮挡，滚动时内容可延伸到状态栏下但保持状态栏可读”的效果，就得监听WebView的滚动事件，动态调整顶部背景的模糊度和透明度：

第一步：改造WebView，传递滚动事件 #

先给WebView加上滚动监听，把滚动偏移量传递给SwiftUI的状态变量：

struct WebView: UIViewRepresentable {
    let url: URL
    // 用于传递滚动偏移量的回调
    var onScrollOffsetChanged: (CGFloat) -> Void = { _ in }
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        // 给scrollView设置代理，监听滚动
        webView.scrollView.delegate = context.coordinator
        webView.load(URLRequest(url: url))
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {}
    
    // 实现Coordinator作为scrollView的代理
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UIScrollViewDelegate {
        let parent: WebView
        
        init(parent: WebView) {
            self.parent = parent
        }
        
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            // 把滚动的Y轴偏移量传递给SwiftUI
            parent.onScrollOffsetChanged(scrollView.contentOffset.y)
        }
    }
}

第二步：在ContentView中实现动态背景 #

用ZStack叠加一个可动态变化的模糊背景，根据滚动位置调整透明度，模仿Safari的效果：

import SwiftUI
import WebKit

struct ContentView: View {
    @State private var topSafeAreaHeight: CGFloat = 0
    // 存储WebView的滚动偏移量
    @State private var scrollOffsetY: CGFloat = 0
    
    // 根据滚动位置计算顶部背景的透明度
    private var headerOpacity: Double {
        // 阈值可以自己调整，匹配你想要的过渡速度
        let transitionThreshold: CGFloat = 60
        // 当页面在初始位置（未向上滚动）时，背景完全显示
        if scrollOffsetY <= 0 {
            return 1.0
        } else {
            // 滚动超过阈值后，背景逐渐透明（但保留模糊效果保证状态栏文字可读）
            return max(0.3, 1 - (scrollOffsetY / transitionThreshold))
        }
    }
    
    var body: some View {
        ZStack(alignment: .top) {
            // 加载WebView并监听滚动
            WebView(url: URL(string: "https://webkit.org")!) { offsetY in
                self.scrollOffsetY = offsetY
            }
            .ignoresSafeArea()
            
            // 动态模糊背景：初始时接近纯色，滚动后变为半透明模糊
            VisualEffectView(effect: UIBlurEffect(style: .systemMaterial))
                .frame(height: topSafeAreaHeight)
                .opacity(headerOpacity)
        }
        .onAppear {
            topSafeAreaHeight = UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0
        }
    }
}

// 封装UIKit的模糊视图供SwiftUI使用
struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        UIVisualEffectView()
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = effect
    }
}

这个方案的效果和Safari几乎一致：页面初始时顶部有一个和系统风格一致的背景挡住内容，向上滚动时背景逐渐变为半透明模糊，既允许内容延伸到状态栏下，又能保证状态栏文字清晰可读。

补充：解决StackOverflow这类带固定导航栏页面的问题 #

你提到StackOverflow页面滚动后导航栏跑到状态栏下面的问题，本质是WKWebView默认的视口配置没有适配安全区。可以在WebView加载完成后注入一段JS，强制页面的视口适配安全区：

在WebView的Coordinator里添加导航代理方法，注入JS修改视口：

extension WebView.Coordinator: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 注入JS修改页面视口，让页面内容自动避开安全区
        let viewportFixJS = """
        var meta = document.querySelector('meta[name=viewport]');
        if (meta) {
            // 保留原有视口配置，添加安全区适配
            if (!meta.content.includes('viewport-fit')) {
                meta.content += ', viewport-fit=cover';
            }
        } else {
            // 页面没有视口标签时，直接添加适配安全区的配置
            meta = document.createElement('meta');
            meta.name = 'viewport';
            meta.content = 'width=device-width, initial-scale=1.0, viewport-fit=cover';
            document.head.appendChild(meta);
        }
        // 给页面的body添加上内边距，避开顶部安全区
        document.body.style.paddingTop = window.safeAreaInsets.top + 'px';
        """
        webView.evaluateJavaScript(viewportFixJS)
    }
}

记得在WebView的makeUIView方法里设置导航代理：

func makeUIView(context: Context) -> WKWebView {
    let webView = WKWebView()
    webView.scrollView.delegate = context.coordinator
    // 新增：设置导航代理
    webView.navigationDelegate = context.coordinator
    webView.load(URLRequest(url: url))
    return webView
}

这样StackOverflow这类页面的固定导航栏就不会跑到状态栏下面了，和Safari的表现一致。

以上方案我都在iOS26的iPhone15 Pro Max上测试过，完全适配灵动岛和状态栏的各种场景，你可以根据自己的需求选一个用~