iOS Safari瀏覽器上overflow: scroll元素無法滑動bug解決方法整理


描述

此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時,啟用硬件加速,出現順滑效果。

分析

  1. 父元素不脫離文檔流時,無此bug。
  2. 父元素在不指定 -webkit-overflow-scrolling:touch時必定出現無法滑動的問題。
  3. 當內部元素為正常的html元素時,無此bug。
  4. 當為父元素重新設置overflow屬性時,可能會導致safari重建ScrollView而bug消失。(之前版本的實驗室用這種方法解決的,但新海外版不能用這種方法fix,所以是可能)

解決方法:

據以上分析以及大量測試得出完美解決方法為:

  1. 必須為所有在移動端的overflow: scroll元素增加屬性 -webkit-overflow-scrolling: touch。
  2. 當父元素可不脫離文檔流時不要脫離文檔流。
  3. 在子元素iframe加載完成后可異步將父元素的overflow: scroll屬性重寫(此方法可能不成功)。
  4. 如以上沒有解決,則給予子元素一個min-height,大小不限(略大於效果最好),幫助safari建立ScrollView(親測最有效)。

更新

此問題的深層原因找到了,詳情請見:iOS safari瀏覽器上overflow: scroll元素無法滾動bug深究


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM