iOS端键盘弹出时网页内容适配异常问题排查

当视觉视口（visualViewport）发生变化（如键盘弹出）时，需要垂直调整页面尺寸。当前实现是监听resize事件，将<html>标签的高度设置为window.visualViewport.height，代码如下：

useEffect(() => {
  function handleVerticalResize() {
    const clientWidth = document.getElementsByTagName("html")[0].clientWidth
    if (window.visualViewport.width === clientWidth) {
      // 说明宽度未变（比如手机端键盘弹出）
      document.getElementsByTagName("html")[0].style.height =
        window.visualViewport.height.toString() + "px"
    }
  }
  if (window.visualViewport) {
    window.visualViewport.addEventListener("resize", handleVerticalResize)
    return () => 
      window.visualViewport.removeEventListener(
        "resize",
        handleVerticalResize
      )
  }
}, [])

测试发现window.visualViewport的高度计算正确，但iOS端（Chrome、Safari均存在问题）出现offsetTop导致布局异常（检查器中蓝色高亮区域为<html>标签），Android端表现正常。请问此问题的原因是什么？

• iOS视觉视口与布局视口的偏移计算逻辑不同：Android中visualViewport的变化不会额外影响元素的offsetTop计算，但iOS浏览器会把visualViewport.offsetTop（视觉视口相对于布局视口的偏移值）纳入元素offsetTop的计算范围。手动设置<html>高度为视觉视口高度后，布局视口没有跟随视觉视口的偏移同步调整，导致依赖offsetTop的元素位置计算错误。
• iOS键盘弹出时的自动滚动与布局冲突：iOS键盘弹出时，浏览器会自动滚动页面让输入框处于视觉视口内，此时视觉视口会向上偏移，但<html>被固定高度后，无法适配这个滚动行为的布局调整，<html>元素的实际位置和视觉视口偏移不匹配，进而引发布局异常。
• iOS对<html>/<body>的默认布局规则限制：iOS浏览器中<html>和<body>的默认高度基于布局视口，手动强制设置<html>高度为视觉视口高度后，打破了原生的布局关联链。而Android浏览器中<html>高度的设置会直接映射到视觉视口，不会出现这种计算冲突。

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