WKWebView弹出键盘时出现与键盘等高额外空白区域问题

问题场景 #

iOS开发过程中，对键盘弹出场景做WKWebView尺寸适配，为了调试视图层级，给WebView所在控制器的view添加了如下调试样式：

self.webViewController.view.layer.borderWidth = 5
self.webViewController.view.layer.borderColor = UIColor.green.cgColor
self.webViewController.view.backgroundColor = UIColor.blue

弹出键盘后出现异常：

• 外层绿色边框显示的WebView位置、尺寸看起来符合预期
• 边框范围内底部出现和键盘高度完全一致的蓝色背景区域
• 页面内可见HTML元素均为fixed定位、宽高100%的全屏元素，可排除蓝色空白来自HTML页面内部的可能

问题效果截图：

现有适配代码 #

当前使用的尺寸调整逻辑如下：

self.keyboardOpenedFrame = CGRect(x: 0, y: 0.5, width: self.view.frame.width, height: self.originalFrame.height - kbSize)
self.view.frame = self.keyboardOpenedFrame

后续补充的WebView SwiftUI封装结构代码：

struct WebView: View {
    typealias UIViewControllerType = UIViewController
    
    var body: some View {
        if #available(iOS 14.0, *) {
            WebViewRepresentable().edgesIgnoringSafeArea(.all).ignoresSafeArea(edges: .bottom)
        } else {
            // Fallback on earlier versions
            WebViewRepresentable().edgesIgnoringSafeArea(.all)
        }
    }
    
    struct WebViewRepresentable: UIViewControllerRepresentable {
        
        func makeUIViewController(context: UIViewControllerRepresentableContext<WebView.WebViewRepresentable>) -> UIViewController {
            return WebViewController()
        }

        func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<WebView.WebViewRepresentable>) {
        }
    }
}

问题根因 #

• 仅修改了WebView所在控制器的根视图frame，未同步更新内部WKWebView的尺寸，也未触发视图层级的布局刷新，WKWebView实际渲染高度仍为原全屏高度，超出父视图的部分被裁切后，露出父视图的蓝色背景。
• WKWebView内部的scrollView默认开启自动内容缩进调整，键盘弹出时系统会自动叠加计算的底部安全区偏移，和手动计算的高度逻辑冲突。
• SwiftUI层重复设置安全区忽略规则，两层布局逻辑同时生效导致状态冲突。

修复方案 #

按以下步骤调整即可解决问题：

1. 保证WKWebView和父视图尺寸同步
   不要仅修改父视图frame，要么给WKWebView加和父视图绑定的自动布局约束，要么在修改父视图frame后，手动同步WebView尺寸并强制刷新布局：

   self.keyboardOpenedFrame = CGRect(x: 0, y: 0.5, width: self.view.frame.width, height: self.originalFrame.height - kbSize)
   self.view.frame = self.keyboardOpenedFrame
   // 同步WebView尺寸
   self.webView.frame = self.view.bounds
   self.webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
   // 强制刷新布局
   self.view.layoutIfNeeded()
   

2. 关闭WebView的自动内容缩进调整
   在WebView初始化代码中添加如下配置，避免系统自动追加底部inset：

   self.webView.scrollView.contentInsetAdjustmentBehavior = .never
   

3. 清理SwiftUI层冗余的安全区配置
   移除重复的.ignoresSafeArea(edges: .bottom)调用，不要SwiftUI和UIKit两层同时做尺寸/安全区适配，避免布局逻辑冲突。

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