1.ios12 浏览器,使用js更改css或内容时,页面自动回到顶部bug
原因:问题似乎是iOS中的浏览器(包括使用the same rendering engine的chrome)无法正确计算iFrame的高度,这会导致重新绘制时在浏览器上出现跳跃行为。
解决:
解决方案A:在大多数情况下,将以下代码添加到iFrame样式表可解决此问题,但滚动拖动事件等可能会出现此方法的问题。
html, body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}解决方案B:
当iFrame呈现所有内容时,您应该计算iFrame内容的高度,然后使用javascript中的内联样式在iFrame元素上显式设置该高度值。在iFrame中修改或添加内容时,需要更新此值,您必须确保高度始终正确,以防止跳转重复出现。
这在处理第三方插件和小部件时会带来挑战,这些插件和小部件会在没有明显回调的情况下改变页面。现在处理这个问题的最佳案例是使用mutation observers。