上幾周給公司app做了一個html5嵌套頁面，頁面並不複雜，展示內容較多，底部有footer
html結構如下
<style> .main{ position: absolute; top: 0; bottom: 88px; left: 0; width: 100%; overflow-y: auto; } footer{ position: fixed; left: 0; bottom: 0; width: 100%; }<style><body> <div class="main"> ... </div> <footer></footer></body>
內容調試完成後插入了一些其他項目的事，後來app開發告訴我要監聽頁面scroll讓我不要用定位布局。我看頁面上沒有可以輸入的地方，不會出現fixed元素亂跑的事情。於是main部分改成了普通布局，然後就出了bug:
安卓上一切正常，IOS10上有時進入頁面的時候footer不顯示，拖拽或者雙擊之後才會顯示(其他版本的IOS測試說有的又是正常的)
遇到這個問題第一個想法就是把footer的z-index調高，設定到1000，結果無用。仔細觀察不顯示的頁面他們的內容部分都很短，沒有撐到footer的位置，猜想是body高度問題，給body加上樣式調試
background: #fafafa;min-height: 100vh;
整個頁面背景確實變灰了，但是footer依舊不顯示
和同事討論之後，猜測是手機渲染出了層級問題，一開始footer沒有渲染出來，click或者touchmove之後頁面重新渲染footer就正常了。
當時已經臨近上線了，為了儘快解決bug不折騰，給footer設定了tanslateZ，這樣相當於建立了一個獨立的層級
-webkit-transform: translateZ(1px)transform: translate(1px)
頁面上還有1個彈層設定了z-index，footer有了translate彈層覆蓋不住，說明tranzlateZ層級更高。彈層設定了translateZ(2px)就正常了
這個方法不太優雅，但好處在不改變布局，情況緊急的時候下還是適用的
相關文章推薦：
css中聖杯布局和雙飛翼布局的介紹（附代碼）
css中如何?浮動的元素換行Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
