Berikut ialah beberapa tajuk berasaskan soalan yang menangkap intipati artikel: Jelas dan Ringkas: * Penambat Kedudukan Tetap dengan UL dalam Badan: Mengapa Ia Pecah dalam Chrome dan Opera? * Sidebar Hilang

Sauh Kedudukan Tetap dengan UL dalam Badan: Menyelesaikan Isu Rendering dalam Chrome dan Opera

Penerangan Isu Rendering

Google Chrome dan Opera mempamerkan isu rendering apabila melaksanakan kod dengan bar sisi kedudukan tetap dan senarai tidak tertib (UL) dalam badan. Khususnya, bar sisi hilang seketika apabila mengklik pautan sauh.

Penyelesaian Chrome

Untuk menangani isu ini dalam Chrome, gunakan sifat CSS berikut pada bar sisi:

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

Ini menggunakan transformasi 3D, memisahkan pengecatan semula daripada operasi CSS lain dan menyelesaikan pepijat paparan.

Penyelesaian Opera

Untuk Opera, animasi CSS berikut boleh digunakan untuk memaksa pengecatan semula berterusan:

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

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

Penyelesaian ini memaksa Opera untuk terus mengira dan memaparkan faktor susun atur, mengekalkan kedudukan tetap bar sisi walaupun terdapat elemen UL.

Nota

Penyelesaian Opera mungkin mengakibatkan kelipan sedikit apabila lukisan semula berlaku. Walau bagaimanapun, ini merupakan penyelesaian optimum untuk isu ini pada masa ini.

Pertimbangan Tambahan

Variasi pepijat ini juga boleh berlaku apabila terdapat perubahan 3D yang lebih tinggi di atas pokok DOM. Alih keluar perubahan sedemikian dahulu untuk mengelakkan isu ini.

Dalam sesetengah kes, penggunaan scale3d(1,1,1) dan bukannya translateZ(0) mungkin diperlukan untuk menyelesaikan isu dalam Chrome.

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk berasaskan soalan yang menangkap intipati artikel: Jelas dan Ringkas: * Penambat Kedudukan Tetap dengan UL dalam Badan: Mengapa Ia Pecah dalam Chrome dan Opera? * Sidebar Hilang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!