ios上-webkit-overflow-scrolling与position的bug

Genng 发布于2019-08-29 12:46 / 3318人阅读

摘要：定位需要，也需要。解决方案把弹窗的和以兄弟节点的方式布局，在外层再弄一个包住这个坑就算爬起来了，效果如下

布局

如上图，.fb-box是一个大div，包含着页面上的所有元素,包括所看到的那个弹窗.dialog-img，并且设置了height:100%;-webkit-overflow-scrolling:touch;

问题

但是这样设置，在ios上会有一个bug,页面滚动一定的距离后，点击了显示弹窗，再关闭的话，就会发现，弹窗的一部分还“留在页面上”。定位需要，-webkit-overflow-scrolling:touch;也需要。

解决方案

把弹窗的div和.fb-box以兄弟节点的方式布局，在外层再弄一个div包住,这个坑就算爬起来了，效果如下

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112132.html

ios上-webkit-overflow-scrolling与position的bug

摘要：定位需要，也需要。解决方案把弹窗的和以兄弟节点的方式布局，在外层再弄一个包住这个坑就算爬起来了，效果如下布局 showImg(https://segmentfault.com/img/bVO8vd?w=1569&h=716);如上图，.fb-box是一个大div，包含着页面上的所有元素,包括所看到的那个弹窗.dialog-img，并且设置了height:100%;-webkit-ov...

dkzwm 2019-08-01 16:58 评论0 收藏0
ios局部滚动的bug所引发的思考

流畅的不要不要的ios出来的bug让人咬牙切齿。bug产生的环境：局部滚动，外部并没有禁止默认浏览器事件bug：导致局部滑动不流畅严重情况下不能滑动解决方案: 1:js禁止外部的浏览器默认事件，停止局部事件冒泡（对于结构简单的页面来说可能适合） 2:-webkit-overflow-scrolling:touch给body和局部滚动的元素 -webkit-overflow-scrolling...

jindong 2019-08-29 11:32 评论0 收藏0
ios局部滚动的bug所引发的思考

流畅的不要不要的ios出来的bug让人咬牙切齿。bug产生的环境：局部滚动，外部并没有禁止默认浏览器事件bug：导致局部滑动不流畅严重情况下不能滑动解决方案: 1:js禁止外部的浏览器默认事件，停止局部事件冒泡（对于结构简单的页面来说可能适合） 2:-webkit-overflow-scrolling:touch给body和局部滚动的元素 -webkit-overflow-scrolling...

ymyang 2019-08-01 15:57 评论0 收藏0