资讯专栏INFORMATION COLUMN

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

dkzwm / 2418人阅读

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

布局


如上图,.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/50865.html

相关文章

  • ios-webkit-overflow-scrollingpositionbug

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

    Genng 评论0 收藏0
  • ios局部滚动bug所引发思考

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

    jindong 评论0 收藏0
  • ios局部滚动bug所引发思考

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

    ymyang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<