iOS Chrome新开标签页打开站点时绝对定位元素定位偏移异常

这是iOS平台WebKit内核存在已久的视口计算偏差问题：

• iOS上所有第三方浏览器（包括Chrome）均未独立实现渲染引擎，完全复用Safari的WebKit渲染逻辑，在通过target="_blank"打开新标签页时，会出现视口高度计算的临时误差。
• 首次直接加载页面时，WebKit会正确计算包含顶部地址栏、底部操作栏的实际可视区高度，设置了bottom值的position: absolute元素会基于这个正确高度匹配定位，展示效果符合预期。
• 新标签页初始加载阶段，WebKit会临时将视口高度按“无底部工具栏的全屏幕尺寸”计算，等页面加载完成、浏览器工具栏完成位置调整后，不会主动触发绝对定位元素的位置重算，导致设置了bottom偏移的元素被推到实际可视区域之外。
• 当元素没有已定位的祖先节点时，绝对定位的包含块会绑定到初始视口，一旦视口高度计算出现偏差，定位结果就会出错，且不会随页面滚动自动修正。

• 优先替换定位方式为position: fixed
  固定定位的计算基准是浏览器实时可视区域，WebKit对固定定位的视口适配容错性更强，能避免新标签页加载时的高度计算偏差。注意需要清除根元素的默认边距，避免产生意外滚动条：

  .mybox{
      width: 150px;
      height: 200px;
      background-color: red;
      /* 替换原absolute定位配置 */
      position: fixed;
      bottom: 70px;
      left: 30px;
  }
  html, body{
      margin: 0;
      padding: 0;
  }
  

• 显式声明定位基准的高度
  给页面根容器设置相对定位和满屏最小高度，让绝对定位元素的计算基准从“动态变化的视口”转为明确的容器尺寸，切断视口计算偏差对定位的影响：

  body{
      position: relative;
      min-height: 100vh;
  }
  .mybox{
      position: absolute;
      bottom: 70px;
      left: 30px;
  }
  

• 页面加载完成后主动触发重排
  如果必须保留原有的绝对定位逻辑，可以在页面完全加载后，通过不会产生视觉影响的样式变动，强制浏览器重新计算所有元素的位置：

  window.addEventListener('load', () => {
      const targetBox = document.querySelector('.mybox');
      // 极小的样式扰动触发重排，无视觉感知
      targetBox.style.opacity = '0.99';
      setTimeout(() => {
          targetBox.style.opacity = '1';
      }, 50)
  })
  

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