iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理

kviccn 发布于2019-08-29 14:11 / 2466人阅读

摘要：而中的网页本身就是一个大的，在脱离文档流的定位时，子元素的高度如果没有在建立之前确定，就不会触发内部滑动，而会触发外部滑动。分析父元素不脱离文档流时，无此。更新此问题的深层原因找到了，详情请见浏览器上元素无法滚动深究

描述

此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scroll / auto)，内部子元素是动态大小（例如较大的svg document，近似为内嵌iframe，等等）。

bug出现原因：没有相关官方文档描述该bug。在查阅文档及自己测试的时候总结：iOS safari 会将overflow：scroll的元素识别为一个多带带的 ScrollView，并予以一个 -webkit-overflow-scrolling 属性为auto。而safari中的网页本身就是一个大的ScrollView，在脱离文档流的定位时，子元素的高度如果没有在ScrollView建立之前确定，就不会触发内部滑动，而会触发外部滑动。

关于 -webkit-overflow-scrolling：Safari CSS Reference官方是这样描述的：

Specifies whether to use native-style scrolling in an overflow:scroll element.

即该属性会让overflow：scroll的元素拥有像iOS原生一样顺滑的滑动效果。为了实现此目标，safari将所有overflow：scroll的元素用原生创建一个ScrollView，当-webkit-overflow-scrolling属性为touch时，启用硬件加速，出现顺滑效果。

分析

父元素不脱离文档流时，无此bug。

父元素在不指定 -webkit-overflow-scrolling：touch时必定出现无法滑动的问题。

当内部元素为正常的html元素时，无此bug。

当为父元素重新设置overflow属性时，可能会导致safari重建ScrollView而bug消失。（之前版本的实验室用这种方法解决的，但新海外版不能用这种方法fix，所以是可能）

解决方法：

据以上分析以及大量测试得出完美解决方法为：

必须为所有在移动端的overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch。

当父元素可不脱离文档流时不要脱离文档流。

在子元素iframe加载完成后可异步将父元素的overflow: scroll属性重写（此方法可能不成功）。

如以上没有解决，则给予子元素一个min-height，大小不限（略大于效果最好），帮助safari建立ScrollView（亲测最有效）。

更新

此问题的深层原因找到了，详情请见：iOS safari浏览器上overflow: scroll元素无法滚动bug深究

超融合服务器混合云微信浏览器 overflow safari扩展浏览器 webrtc+ios+safari webrtc ios safari

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

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

iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理

摘要：而中的网页本身就是一个大的，在脱离文档流的定位时，子元素的高度如果没有在建立之前确定，就不会触发内部滑动，而会触发外部滑动。分析父元素不脱离文档流时，无此。更新此问题的深层原因找到了，详情请见浏览器上元素无法滚动深究描述此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scr...

eternalshallow 2019-08-21 18:44 评论0 收藏0
iOS safari浏览器上overflow: scroll元素无法滚动bug深究

摘要：前情提要在之前我写过一篇文章浏览器上元素无法滑动解决方法整理，这篇文章写的是，当浏览器上出现大于父容器的元素，想给父容器加上实现内部滚动效果而失败的总结。解决方法反其道而行之。当子元素加载完成时，将包裹元素撑开，父元素便可以自由滚动了。前情提要在之前我写过一篇文章：iOS safari浏览器上overflow: scroll元素无法滑动bug解决方法整理，这篇文章写的是，当iOS ...

Steve_Wang_ 2019-08-29 16:44 评论0 收藏0
iOS safari浏览器上overflow: scroll元素无法滚动bug深究

摘要：前情提要在之前我写过一篇文章浏览器上元素无法滑动解决方法整理，这篇文章写的是，当浏览器上出现大于父容器的元素，想给父容器加上实现内部滚动效果而失败的总结。解决方法反其道而行之。当子元素加载完成时，将包裹元素撑开，父元素便可以自由滚动了。前情提要在之前我写过一篇文章：iOS safari浏览器上overflow: scroll元素无法滑动bug解决方法整理，这篇文章写的是，当iOS ...

shmily 2019-08-23 11:59 评论0 收藏0
Issues with position fixed & scroll（移动端 fixed

摘要：同时，请在其他移动端浏览器也这么处理，不要只对苹果做这些处理。苹果对于虎头蛇尾的做法真让人头疼，这作风跟巨硬真像。转载请注明英文原文及译文出处原文地址：Issues with position fixed & scrolling on iOS 原文作者：Remy Sharp译文地址：移动端 fixed 和 scroll 问题译文作者：鎏金圣手火麒麟最近在做iOS端的H5页面...

Jiavan 2019-08-21 17:00 评论0 收藏0