Mengapa Bar Sisi Tetap Hilang Apabila Mengklik Pautan Sauh dalam Chrome dan Opera?

Isu Kedudukan Tetap dengan Anchor dan Senarai UL dalam Google Chrome dan Opera

Artikel ini menangani isu pemaparan yang diperhatikan dalam penyemak imbas Google Chrome dan Opera di mana bar sisi kedudukan tetap mungkin hilang apabila mengklik pada pautan sauh dalam halaman. Kehadiran

elemen pada halaman memburukkan lagi isu ini.

Penyelesaian Chrome

Menggunakan sifat -webkit-transform: translateZ(0) ke elemen bar sisi tetap menyelesaikan masalah ini dalam Chrome . Teknik ini mengeksploitasi pemisahan pengecatan semula dan pemaparan CSS apabila melibatkan transformasi 3D, mengurangkan gangguan paparan.

<code class="css">#sidebar {
    -webkit-transform: translateZ(0);
}</code>

Salin selepas log masuk

Penyelesaian Opera

Mengatasi isu ini dalam Opera memerlukan pendekatan berbeza. Kami menggunakan animasi @keyframes untuk memaksa pengecatan semula berterusan pada sifat CSS yang mempengaruhi reka letak tetapi tidak mempunyai kesan praktikal pada penampilan halaman. Dalam kes ini, kami menghidupkan sifat margin-bawah:

<code class="css">@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}</code>

Salin selepas log masuk

Adalah penting untuk ambil perhatian bahawa penyelesaian ini tidak sempurna. Dalam sesetengah kes, kelipan singkat mungkin berlaku apabila bar sisi kehilangan kedudukan dan melukis semula dengan cepat. Tingkah laku intrinsik Opera antara lukisan semula bertanggungjawab untuk isu ini.

Pertimbangan Tambahan

Pertemuan seterusnya dengan pepijat ini telah menunjukkan kejadian yang kerap berlaku dalam kes di mana transformasi 3D telah digunakan pada badan atau unsur induk. Amalan ini, yang sering digunakan untuk menguatkuasakan pemaparan GPU, boleh membawa kepada isu pemaparan yang berterusan. Pertimbangkan untuk mengalih keluar transformasi 3D sedia ada sebelum melaksanakan penyelesaian yang disediakan di atas.

Google Chrome dan Opera kini mengendalikan kedudukan tetap dengan kestabilan yang lebih baik. Pembetulan ini telah menunjukkan keberkesanan dalam menyelesaikan isu pemaparan yang berkaitan dengan penggunaan elemen UL pada halaman.

Atas ialah kandungan terperinci Mengapa Bar Sisi Tetap Hilang Apabila Mengklik Pautan Sauh dalam Chrome dan Opera?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!