如何解決行動端fixed元素不顯示的問題
- 不言原創
- 2018-08-02 10:44:063039瀏覽
這篇文章要跟大家介紹的內容是關於如何解決行動端fixed元素不顯示的問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
上幾週給公司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中如何實現浮動的元素換行#以上是如何解決行動端fixed元素不顯示的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn