ios 更新26系统版本,键盘弹起后fixed定位元素位置错乱

570 阅读1分钟

原因:ios系统更新。

beta版本已修复,如果能更新系统可以不修复,如果要做兼容可看后面问题解决方案;

已经有相关反馈:苹果开发者平台StackOverflow

问题描述:

在WebView和Safari中,top/bottom使用fixed定位在头部和底部,键盘弹出后再滚动页面,定位会出现偏差(甚至苹果官网也有这个问题)

可访问👇的二维码查看效果)

问题排查:

键盘弹起收回后window.visualViewport.heightwindow.innerHeight值不一致;

问题解决:

使用容器滚动而不是默认的页面滚动

<div class="page-scroll-container"> 
  ...
</div>
html,body,#root {
 height: 100%;
}

.page-scroll-container {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: none; /*阻止默认滚动行为*/
}

影响点:

依赖页面滚动

  • 头部监听页面滚动
  • 埋点监听
  • window.scrollTo失效