ios html无法滚动,iOS Safari浏览器上overflow: scroll元素没法滑动bug解决方法整理
描述此bug出现须要条件:父元素需使用绝对定位absolute或固定定位fixed,使用overflow: scroll / auto(或overflow-y: scroll / auto),内部子元素是动态大小(例如较大的svg document,近似为内嵌iframe,等等)。htmlbug出现缘由:没有相关官方文档描述该bug。在查阅文档及本身测试的时候总结:iOS safari 会将ove
描述
此bug出现须要条件:父元素需使用绝对定位absolute或固定定位fixed,使用overflow: scroll / auto(或overflow-y: scroll / auto),内部子元素是动态大小(例如较大的svg document,近似为内嵌iframe,等等)。html
bug出现缘由:没有相关官方文档描述该bug。在查阅文档及本身测试的时候总结:iOS safari 会将overflow:scroll的元素识别为一个单独的 ScrollView,并予以一个 -webkit-overflow-scrolling 属性为auto。而safari中的网页自己就是一个大的ScrollView,在脱离文档流的定位时,子元素的高度若是没有在ScrollView创建以前肯定,就不会触发内部滑动,而会触发外部滑动。web
关于 -webkit-overflow-scrolling:Safari CSS Reference官方是这样描述的:segmentfault
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(亲测最有效)。
更新
更多推荐
所有评论(0)