原因:ios系统更新。
beta版本已修复,如果能更新系统可以不修复,如果要做兼容可看后面问题解决方案;
已经有相关反馈:苹果开发者平台、StackOverflow
问题描述:
在WebView和Safari中,top/bottom使用fixed定位在头部和底部,键盘弹出后再滚动页面,定位会出现偏差(甚至苹果官网也有这个问题)
(可访问👇的二维码查看效果)
问题排查:
键盘弹起收回后window.visualViewport.height和window.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失效