macOS下NavigationSplitView侧边栏切换时WebView边缘闪烁问题

我的macOS应用用SwiftUI的NavigationSplitView实现大部分UI，但其中一个标签页是通过NSViewRepresentable封装的WKWebView（因需要原生SwiftUI WebView没有的API）。当侧边栏显示/隐藏时，WebView边缘会出现闪烁现象，已用简易测试项目复现问题：

复现代码 #

SwiftUI主视图 #

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            Label("HI", image: "globe")
        } detail: {
            FancyWebKitWebViewSwiftUIWrapper(htmlFileName: "webview")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .ignoresSafeArea()
        }
    }
}

WKWebView封装类 #

struct FancyWebKitWebViewSwiftUIWrapper: NSViewRepresentable {
    let htmlFileName: String
    
    func makeNSView(context: Context) -> WKWebView {
        let configuration = WKWebViewConfiguration()
        let webView = WKWebView(frame: .zero, configuration: configuration)
        
        // Load the HTML file
        if let htmlPath = Bundle.main.path(forResource: htmlFileName, ofType: "html"),
           let htmlContent = try? String(contentsOfFile: htmlPath) {
                print("Content loaded successfully")
                // Create a proper file URL for the base directory
                let htmlDirectory = URL(fileURLWithPath: htmlPath).deletingLastPathComponent()
                webView.loadHTMLString(htmlContent, baseURL: htmlDirectory)
        }
        return webView
    }
    
    func updateNSView(_ nsView: WKWebView, context: Context) {
        // No updates needed
    }
}

WebView加载的HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView Background</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            background-color: #800080;
            position: relative;
            overflow: hidden;
        }
        
        .border-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 4px solid #000000;
        }
        
        .criss-cross {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .line-horizontal {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #000000;
            transform: translateY(-50%);
        }
        
        .line-vertical {
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background-color: #000000;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="border-box"></div>
    <div class="criss-cross">
        <div class="line-horizontal"></div>
        <div class="line-vertical"></div>
    </div>
</body>
</html>

解决方案 #

方法1：同步WKWebView尺寸与SwiftUI布局 #

问题根源是SwiftUI的动画更新未同步传递给WKWebView，导致Web内容重绘滞后。修改封装类，在updateNSView中强制同步尺寸，并开启层渲染优化：

struct FancyWebKitWebViewSwiftUIWrapper: NSViewRepresentable {
    let htmlFileName: String
    
    func makeNSView(context: Context) -> WKWebView {
        let configuration = WKWebViewConfiguration()
        let webView = WKWebView(frame: .zero, configuration: configuration)
        
        // 开启层渲染，减少闪烁
        webView.wantsLayer = true
        webView.layer?.contentsGravity = .resize
        
        // 加载HTML
        if let htmlPath = Bundle.main.path(forResource: htmlFileName, ofType: "html"),
           let htmlContent = try? String(contentsOfFile: htmlPath) {
                let htmlDirectory = URL(fileURLWithPath: htmlPath).deletingLastPathComponent()
                webView.loadHTMLString(htmlContent, baseURL: htmlDirectory)
        }
        return webView
    }
    
    func updateNSView(_ nsView: WKWebView, context: Context) {
        // 同步WebView尺寸到父容器 bounds
        nsView.frame = nsView.superview?.bounds ?? .zero
        // 触发实时重绘
        nsView.setNeedsDisplay(nsView.bounds)
    }
}

方法2：修改HTML布局适配容器 #

将HTML中依赖视口的100vw/100vh替换为100%，让内容自适应容器尺寸而非视口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>WebView Background</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #800080;
            position: relative;
            overflow: hidden;
        }
        
        .border-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 4px solid #000000;
        }
        
        .criss-cross {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .line-horizontal {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #000000;
            transform: translateY(-50%);
        }
        
        .line-vertical {
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background-color: #000000;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="border-box"></div>
    <div class="criss-cross">
        <div class="line-horizontal"></div>
        <div class="line-vertical"></div>
    </div>
</body>
</html>

方法3：优化WKWebView渲染配置 #

禁用WebKit的异步渲染延迟，强制实时更新：

func makeNSView(context: Context) -> WKWebView {
    let configuration = WKWebViewConfiguration()
    // 禁用异步渲染，确保尺寸变化时实时重绘
    configuration.preferences.setValue(true, forKey: "developerExtrasEnabled")
    
    let webView = WKWebView(frame: .zero, configuration: configuration)
    webView.wantsLayer = true
    // 设置与HTML一致的背景色，避免边缘漏出底色
    webView.layer?.backgroundColor = NSColor(red: 128/255, green: 0, blue: 128/255, alpha: 1).cgColor
    webView.layer?.isOpaque = true
    
    // 加载HTML代码...
    return webView
}

内容的提问来源于stack exchange，提问作者CalebK