iOS safari瀏覽器上overflow: scroll元素沒法滾動bug深究

前情提要

在以前我寫過一篇文章：iOS safari瀏覽器上overflow: scroll元素沒法滑動bug解決方法整理，這篇文章寫的是，當iOS safari瀏覽器上出現大於父容器的svg元素，想給父容器加上overflow: scroll實現內部滾動效果而失敗的總結。但當時並無意識到這個問題的實際原理，只是知道了safari給scroll元素加入了原生的scrollView塊。

bug原理

最近在作一個項目的時候，在safari上遇到了一個其餘的bug，卻讓我意識到了這個問題的終極緣由。

項目bug是這樣的：我在用Nuxt作一個展現站點，須要使用錨連接在頁面剛進入的時候跳轉到某個位置。這裏我原本使用的是router api提供的scrollBehavior方法，但這個方法在Nuxt上有侷限性。我就把實現方式改成：進入頁面後，動態計算不一樣錨點位置的scroll top再設置父元素的scroll位置。

在其餘瀏覽器上都是ok的，但在safari上就出了問題：在頁面剛進入時沒法正確獲取到元素的scroll top，小不少，只有頁面加載完成以後才能夠。

究其緣由，是由於我在頁面上放了不少張圖片讓其自行佔位，而在頁面剛加載時，其餘瀏覽器會預先獲取到圖片的大小而給其一個佔位，不管圖片是否加載完成頁面總高度固定的。而safari就不同，圖片沒加載成功時高度是0。

圖片沒加載成功時高度是0。哇長見識了。

這時回想到以前在safari上的那個scroll bug，在查閱相關資料後就能夠得出結論了：

safari瀏覽器在渲染頁面元素的時候，會預先走webkit瀏覽器的渲染流程：

1. 構建DOM tree
2. 構建CSS rule tree
3. 根據DOM和CSS tree來構建render tree
4. 根據render tree計算頁面的layout
5. render頁面

注意在第三步和第四步的時候，safari瀏覽器在構建render tree的時候，會預先找到相應的overflow: scroll元素，在計算頁面layout的時候，會計算父元素的高度與子元素的高度，若子元素高於父元素，則在render頁面時爲其創建一個原生的scrollView。

這個scrollView有什麼用的？其實就是爲了給其一個彈彈樂的效果（但確實用戶體驗不錯）。

當子元素是某個媒體格式時，好比img、object（svg）等，safari在加載完成以前是不會在計算在layout以內的，也就是高度爲0，則子元素的高度就必定小於父元素的高度，safari不會給父元素一個原生的scrollView。

解決方法

反其道而行之。當出現這種問題的時候，給子元素一個包裹元素，包裹元素設置一個min-height大於父元素的高度，讓父元素有scrollView。當子元素加載完成時，將包裹元素撐開，父元素即可以自由滾動了。