フォントサイズをさらに大きくしたときにWKWebViewが表示されなくなる

サンプル

GitHub - akuraru/WebViewSample

悪い実装

Dynamic Typeでさらに大きいフォントサイズを使った場合にWKWebViewで表示されている内容が表示されなくなる問題が発生しました。SwiftUIでButtonの中にWKWebViewを表示した場合に起こります。これは、見た目はWebViewで表示して、タップした時の処理をButton側で行うためです。この実装の場合にDynamic Typeでフォントサイズを大きくした場合にWebViewのサイズが0になり、内容が表示されなくなります。

struct BadWebView: View {
    let wkWebView = WKWebView()
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            WebView(wkWebView: wkWebView)
        }
        .onAppear {
            wkWebView.load(URLRequest(url: URL(string: "https://www.apple.com")!))
        }
    }
}

struct WebView: UIViewRepresentable {
    let wkWebView: WKWebView
    
    func makeUIView(context: Context) -> some UIView {
        wkWebView
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

改善した実装

ZStackでWebViewをButtonの裏に隠してWebViewを完全に覆いました。これは、見た目はWebViewで表示して、タップした時の処理をButton側を行いつつ、フォントサイズを大きくしてもWebViewは表示されたままになります。

struct GoodWebView: View {
    let wkWebView = WKWebView()
    let action: () -> Void
    
    var body: some View {
        ZStack {
            WebView(wkWebView: wkWebView)
            Button(action: action) {
                Color.clear
            }
        }
        .onAppear {
            wkWebView.load(URLRequest(url: URL(string: "https://www.apple.com")!))
        }
    }
}