如何解決移動(dòng)端fixed元素不顯示的問(wèn)題

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:47:50

如何解決移動(dòng)端fixed元素不顯示的問(wèn)題

如何解決移動(dòng)端fixed元素不顯示的問(wèn)題:這篇文章給大家介紹的內(nèi)容是關(guān)于如何解決移動(dòng)端fixed元素不顯示的問(wèn)題，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。上幾周給公司app做了一個(gè)html5嵌套頁(yè)面，頁(yè)面并不復(fù)雜，展示內(nèi)容較多，底部有footerhtml結(jié)構(gòu)如下<style&

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀如何解決移動(dòng)端fixed元素不顯示的問(wèn)題:這篇文章給大家介紹的內(nèi)容是關(guān)于如何解決移動(dòng)端fixed元素不顯示的問(wèn)題，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。上幾周給公司app做了一個(gè)html5嵌套頁(yè)面，頁(yè)面并不復(fù)雜，展示內(nèi)容較多，底部有footerhtml結(jié)構(gòu)如下<style&

這篇文章給大家介紹的內(nèi)容是關(guān)于如何解決移動(dòng)端fixed元素不顯示的問(wèn)題，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

上幾周給公司app做了一個(gè)html5嵌套頁(yè)面，頁(yè)面并不復(fù)雜，展示內(nèi)容較多，底部有footer

html結(jié)構(gòu)如下

<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>

內(nèi)容調(diào)試完成后插入了一些其他項(xiàng)目的事，后來(lái)app開(kāi)發(fā)告訴我要監(jiān)聽(tīng)頁(yè)面scroll讓我不要用定位布局。我看頁(yè)面上沒(méi)有可以輸入的地方，不會(huì)出現(xiàn)fixed元素亂跑的事情。于是main部分改成了普通布局，然后就出了bug:
安卓上一切正常，IOS10上有時(shí)進(jìn)入頁(yè)面的時(shí)候footer不顯示，拖拽或者雙擊之后才會(huì)顯示(其他版本的IOS測(cè)試說(shuō)有的又是正常的)

遇到這個(gè)問(wèn)題第一個(gè)想法就是把footer的z-index調(diào)高，設(shè)置到1000，結(jié)果無(wú)用。仔細(xì)觀察不顯示的頁(yè)面他們的內(nèi)容部分都很短，沒(méi)有撐到footer的位置，猜想是body高度問(wèn)題，給body加上樣式調(diào)試

background: #fafafa;
min-height: 100vh;

整個(gè)頁(yè)面背景確實(shí)變灰了，但是footer依舊不顯示

和同事討論之后，猜測(cè)是手機(jī)渲染出了層級(jí)問(wèn)題，一開(kāi)始footer沒(méi)有渲染出來(lái)，click或者touchmove之后頁(yè)面重新渲染footer就正常了。
當(dāng)時(shí)已經(jīng)臨近上線了，為了盡快解決bug不折騰，給footer設(shè)置了tanslateZ，這樣相當(dāng)于創(chuàng)建了一個(gè)獨(dú)立的層級(jí)

-webkit-transform: translateZ(1px)
transform: translate(1px)

頁(yè)面上還有1個(gè)彈層設(shè)置了z-index，footer有了translate彈層覆蓋不住，說(shuō)明tranzlateZ層級(jí)更高。彈層設(shè)置了translateZ(2px)就正常了
這個(gè)方法不太優(yōu)雅，但好處在不改變布局，情況緊急的時(shí)候下還是適用的

相關(guān)文章推薦：

css中圣杯布局和雙飛翼布局的介紹（附代碼）

css中如何實(shí)現(xiàn)浮動(dòng)的元素?fù)Q行

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com