如何解决移动端fixed元素不显示的问题
这篇文章给大家介绍的内容是关于如何解决移动端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中如何实现浮动的元素换行Atas ialah kandungan terperinci 如何解决移动端fixed元素不显示的问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

1. Binance terkenal dengan jumlah transaksi yang besar dan pasangan perdagangan yang kaya. Ia menyediakan model perdagangan yang pelbagai dan ekosistem yang sempurna. Ia juga memastikan keselamatan aset pengguna melalui dana SAFU dan teknologi keselamatan berganda dan sangat penting untuk operasi yang mematuhi; 2. Okx Ouyi menyediakan pelbagai perkhidmatan perdagangan aset digital dan model akaun perdagangan bersatu, secara aktif menyebarkan medan Web3, dan meningkatkan keselamatan dan pengalaman transaksi melalui kawalan risiko yang ketat dan pendidikan pengguna; 3. Gate.io Sesame membuka pintu dan mempunyai kelajuan mata wang yang baik dan mata wang yang kaya, menyediakan alat perdagangan yang pelbagai dan perkhidmatan nilai tambah, mengamalkan pelbagai mekanisme pengesahan keselamatan dan mematuhi ketelusan rizab aset untuk meningkatkan kepercayaan pengguna; 4. Huobi menyediakan perkhidmatan aset digital sehenti dengan pengumpulan industri yang mendalam, dengan kedalaman urus niaga yang kuat dan

Thecssfilterpropertyallowsvisualeffectslebur, kecerahan, andgrayscaletobeapplieddirectlytoHtmlelements.1) usethesyntaxfilter: filter-function (nilai) toapplyeffect.2) combinemultipleFileSwithswithswith, E.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.G.

Gunakan div dengan sempadan untuk membuat garis menegak dengan cepat, dan tentukan gaya dan ketinggian dengan menetapkan sempadan dan ketinggian; 2. Penggunaan :: Sebelum atau :: Selepas elemen pseudo untuk menambah garis menegak tanpa tag HTML tambahan, sesuai untuk pemisahan hiasan; 3. Dalam susun atur Flexbox, dengan menetapkan warna lebar dan latar belakang kelas pembahagi, pembahagi menegak adaptif antara bekas elastik dapat dicapai; 4. Dalam cssgrid, masukkan garis menegak sebagai lajur bebas (seperti lajur autowidth) ke dalam susun atur grid, yang sesuai untuk reka bentuk responsif; Kaedah yang paling sesuai harus dipilih mengikut susun atur khusus untuk memastikan strukturnya mudah dan mudah dijaga.

Thereadonlyattributeinhtml5makesforminputsnon-edicitableWhilestillallowingsubmissionanduserInterAction; 1.itappliestoandelements; 2.ISAbooleanattribute, segera "readonly" needstobepresent; 3. tidak disengajakan ", itallowsfocusandthedthedataisandthedata

Apabila menggunakan pemilih CSS, pemilih spesifik rendah harus digunakan terlebih dahulu untuk mengelakkan batasan yang berlebihan; 1. Memahami tahap kekhususan dan gunakannya dengan munasabah dalam urutan jenis, kelas, dan ID; 2. Gunakan nama kelas pelbagai tujuan untuk meningkatkan kebolehgunaan dan kebolehkerjaan; 3. Gunakan atribut dan pemilih kelas pseudo untuk mengelakkan masalah prestasi; 4. Pastikan pemilih pendek dan jelas skop; 5. Gunakan BEM dan spesifikasi penamaan lain untuk meningkatkan kejelasan struktur; 6. Elakkan penyalahgunaan pemilih tag dan: anak-anak, dan memberi keutamaan kepada penggunaan kelas alat atau CSS modular untuk memastikan gaya itu dapat dikawal untuk masa yang lama.

Atribut Mix-Blend-Mode digunakan untuk mengawal kesan pencampuran kandungan elemen dan latar belakang. 1. Multiply boleh mencapai tumpang tindih teks dan imej latar belakang; 2. Skrin mencerahkan imej dan sesuai untuk latar belakang gelap; 3. Overlay meningkatkan kontras, menggabungkan ciri -ciri multiply dan skrin; 4. Perbezaan mewujudkan kontras yang kuat, yang sesuai untuk reka bentuk kreatif; Adalah perlu untuk memastikan bahawa unsur-unsur bertindih dan susunan susunan Z-indeks yang betul, dan digabungkan dengan pengasingan: mengasingkan, pelbagai pencampuran boleh terhad, dan kesan visual yang kaya dapat dicapai dengan menyesuaikan warna dan mod.

UseWhite-space: nowraptopreventtextFreakingontomultiplines, memastikanContentStononasingleline;

Untuk membuat laman web HTML5 yang mudah, anda perlu terlebih dahulu menggunakan jenis dokumen pengisytiharan, dan kemudian membina struktur asas yang mengandungi, dan, yang menetapkan pengekodan aksara, viewport dan tajuk, menambah kandungan yang kelihatan seperti tajuk, perenggan, pautan, gambar dan senarai. Simpan sebagai fail .html dan buka secara langsung dalam penyemak imbas untuk dilihat, tanpa sokongan pelayan. Ini adalah asas halaman HTML5 yang lengkap dan berkesan.
