IOS 瀏覽器端overflow:scroll overflow:auto元素無法滑動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,在關於 -webkit-overflow-scrolling:Safari CSS Reference官方是這樣描述的:脫離文檔流的定位時,子元素的高度如果沒有在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(親測最有效)。
參考鏈接: https://segmentfault.com/a/1190000012761272



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章