非SwiftUI iOS应用模态WKWebView导航栏/toolbar透明Bug求解

问题核心 #

在非SwiftUI的iOS应用中，模态视图嵌入WKWebView后，设置navigationBar.isTranslucent = false和toolbar.isTranslucent = false会出现两个异常：

• 页面滚动到顶部时，导航栏背景变为透明，底层红色视图会透过导航栏显示
• 页面滚动到底部时，toolbar背景同样变为透明

同时如果不设置toolbar为非半透明，会出现webView内容被toolbar遮挡的情况。

问题原因 #

当导航栏和toolbar设置为非半透明时，系统不会自动调整WKWebView的滚动区域和内容偏移，加上原代码中WKWebView的约束直接绑定到view的top/bottom，导致webView的滚动内容与栏的布局区域重叠，滚动到边界时触发了错误的视觉效果。

解决方案 #

1. 调整WKWebView的布局约束到安全区域 #

将WKWebView的top和bottom锚点绑定到view.safeAreaLayoutGuide，而非直接绑定到view的top/bottom。这样webView会自动避开导航栏和toolbar，既解决内容遮挡问题，也能避免滚动时栏的透明bug。

2. 确保导航栏和toolbar的背景样式正确设置 #

非半透明状态下，barTintColor会完全生效，同时可以设置shadowColor来保持栏的阴影，避免栏和内容视觉上融合。

修改后的完整代码 #

import UIKit
import WebKit

class ViewController: UIViewController {
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        view.backgroundColor = .red
        self.presentModalWebViewController(for: URL(string: "https://www.apple.com/compliance/")!, hideBrowserUI: false)
    }

    func presentModalWebViewController(for url: URL, hideBrowserUI: Bool) {
        let modalWebViewController = ModalWebViewController()
        modalWebViewController.load(url)

        let navigationController = UINavigationController(rootViewController: modalWebViewController)

        navigationController.setToolbarHidden(false, animated: false)

        // 设置非半透明栏的背景色
        navigationController.navigationBar.barTintColor = .systemBackground
        navigationController.toolbar.barTintColor = .yellow
        
        // 保持栏的阴影，避免和内容融合
        navigationController.navigationBar.shadowColor = .separator
        navigationController.toolbar.shadowColor = .separator

        // 保持非半透明设置
        navigationController.navigationBar.isTranslucent = false
        navigationController.toolbar.isTranslucent = false

        present(navigationController, animated: true)
    }
}


class ModalWebViewController: UIViewController {
    private lazy var webView: WKWebView = WKWebView(frame: .zero)

    override func viewDidLoad() {
        super.viewDidLoad()

        setToolbarItems([ UIBarButtonItem(barButtonSystemItem: .organize, target: nil, action: nil) ], animated: false)
        navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .organize, target: nil, action: nil)

        webView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(webView)

        // 关键修改：绑定到safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            webView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        ])
    }

    func load(_ url: URL) {
        webView.load(URLRequest(url: url))
    }
}

额外说明 #

如果某些网页本身有固定定位的元素（比如底部导航），可以进一步调整WKWebView的contentInset，但上述方案已经解决核心的透明和遮挡问题。通过绑定安全区域，系统会自动处理导航栏和toolbar的布局偏移，滚动到边界时不会再出现栏透明的情况。

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