Mengapa Penambat Kedudukan Tetap Saya Hilang dalam Chrome dan Opera Apabila Mengklik Pautan UL?

Isu Paparan Chrome dan Opera: Penambat Kedudukan Tetap dengan UL dalam Badan

Dalam penyemak imbas tertentu seperti Chrome dan Opera, isu pemaparan yang pelik boleh timbul apabila cuba meletakkan elemen tetap bersama tag UL. Isu ini nyata apabila elemen tetap hilang seketika apabila mengklik pautan sauh.

Punca Punca

Punca asas isu ini dikaitkan dengan cara penyemak imbas ini mengendalikan pengecatan semula apabila elemen pada halaman dikemas kini . Khususnya, elemen tetap mungkin kehilangan kedudukannya buat sementara waktu semasa proses mengecat semula.

Penyelesaian Chrome

Untuk menyelesaikan isu ini dalam Chrome, anda boleh menggunakan transformasi translateZ(0) kepada elemen tetap yang bermasalah . Tindakan ini mencetuskan transformasi 3D secara berkesan, mengasingkan proses mengecat semula daripada susunan CSS yang lain, sekali gus mengurangkan isu kedudukan.

#sidebar {
    -webkit-transform: translateZ(0);
}

Penyelesaian Opera

Untuk Opera, pendekatan yang sedikit berbeza diperlukan. Dalam kes ini, anda boleh mencipta animasi CSS yang mengecat semula sifat secara berterusan yang mempengaruhi reka letak tetapi tidak memberi kesan kepada penampilan visual elemen, seperti margin-bawah. Pendekatan ini memperdayakan Opera untuk melakukan pengecatan semula berterusan, memastikan elemen tetap mengekalkan kedudukannya.

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

Nota

Adalah penting untuk ambil perhatian bahawa penyelesaian ini mungkin tidak kalis mudah dan mungkin mengakibatkan sedikit berkelip apabila Opera cuba mendapatkan semula kedudukan tetap. Had ini wujud dalam cara Opera mengendalikan proses mengecat semula, menjadikannya sukar untuk menghapuskan sepenuhnya artifak visual.

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