IOS 瀏覽器上設置overflow: auto 不可滾動
項目中最近遇到一個bug,在ios上出現的問題：原頁面是在某一塊地方滾動，但是改版後，滾動區域改為最外層元素，最外層包裹了一層class為main的div
.main {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
裏面是兩個元素，上下布局，下面的元素本身是在自己的區域滾動，現在改為跟著上面的元素滾動，到一定距離時把tab固定在頂部。
這個時候有一個tab，每次切換過來時都無法滾動，在本地Chorme瀏覽器裏測試沒有問題，但是發布到測試環境， 在ios上就會出現這個問題，試過很多布局和樣式，都無法讓它滾動，查閱資料後得知：
safari瀏覽器在渲染頁面元素的時候，會預先走webkit瀏覽器的渲染流程：
- 構建DOM tree
- 構建CSS rule tree
- 根據DOM和CSS tree來構建render tree
- 根據render tree計算頁面的layout
- render頁面
註意在第三步和第四步的時候，safari瀏覽器在構建render tree的時候，會預先找到相應的overflow: scroll元素，在計算頁面layout的時候，會計算父元素的高度與子元素的高度，若子元素高於父元素，則在render頁面時為其建立一個原生的scrollView。
當子元素的高度是加載後動態計算的時候，safari在加載完成之前是不會在計算在layout之內的，也就是高度為0，則子元素的高度就一定小於父元素的高度，safari不會給父元素一個原生的scrollView。
解決方法
當出現這種問題的時候，給子元素一個height大於等於父元素的高度，讓父元素有scrollView。當子元素加載完成時，將包裹元素撐開，父元素便可以自由滾動了。但是截止目前還存在一個問題，就是這個子元素的內容有可能是空的或者高度不足以使父元素滾動，如果設置了height: 100% 這樣的情況下也可以滾動，體驗上有點問題。這個時候我在子元素完全加載後計算實際高度，再覆蓋100%，這樣就可以解決這個小問題了。
IOS 瀏覽器上設置overflow: auto 不可滾動