描述
此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深究