ios WebView模式有缺陷:导航栏bg滚动到顶部时变为半透明,工具栏滚动到底部时变为半透明

lxkprmvk  于 2023-07-01  发布在  iOS
关注(0)|答案(1)|浏览(123)

我在一个非SwiftUI的iOS应用程序中看到了以下奇怪之处。我在最后放了一个小的,独立的复制品。
我在modal中打开一个WKWebView。
导航栏和工具栏都设置为isTranslucent = false
现在,如果删除…isTranslucent = false行,我会看到两个问题:
1.当加载模态并将页面滚动到顶部时,导航栏具有透明的背景,在根视图的红色背景上显示其图标。
1.当我将页面一直滚动到底部时,工具栏以同样的方式变得透明,在红色背景上显示其图标。

有没有什么办法在避免这个bug的同时保持导航栏和工具栏的非透明?
我不确定www.example.com中提到的所有问题https://github.com/turbolinks/turbolinks-ios/issues/150#issuecomment-449422224(在代码注解中引用)是否仍然相关,但我确实注意到,如果我不使工具栏半透明,它将覆盖某些页面的底部内容(例如https://auctionet.com/en/about,在撰写本文时)。
这是一个单文件复制-您可以在Xcode中生成一个新的iOS应用程序(接口:故事板,而不是SwiftUI),并将其粘贴到ViewController.swift中,它应该会构建。

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)

        // Just to show that the thing at the bottom is indeed `toolbar`.
        navigationController.toolbar.barTintColor = .yellow

        // ------
        // This fixes initial scroll position issues and positioning issues caused by WKWebView bugs as described in https://github.com/turbolinks/turbolinks-ios/issues/150#issuecomment-449422224

        // Commenting this out fixes the "nav bar is transparent when scrolled to top" issue.
        navigationController.navigationBar.isTranslucent = false

        // Commenting this out fixes the "toolbar is transparent when scrolled to bottom" issue.
        // The background does change from yellow to white (in light mode) when we reach the bottom.
        // I can live with that since the yellow is just for debugging, but it's curious.
        navigationController.toolbar.isTranslucent = false

        // ------

        present(navigationController, animated: true)
    }
}

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

    override func viewDidLoad() {
        super.viewDidLoad()

        // Just to have something in the nav bar and toolbar.
        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)

        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: view.topAnchor),
            webView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        ])
    }

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

vaj7vani1#

添加这个(就在present(navigationController, animated: true)之前)修复了它:

navigationController.view.backgroundColor = .systemBackground

如果您需要支援iOS 12或更早版本:

if #available(iOS 13.0, *) {
    navigationController.view.backgroundColor = .systemBackground
} else {
    navigationController.view.backgroundColor = .white
}

相关问题