上幾周給公司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中如何實現浮動的元素換行聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
