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-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-10-26 06:12:02

asal

228 orang telah melayarinya

Here are a few question-based titles that capture the essence of the article:

Clear and Concise:

* Fixed Position Anchor with UL in Body: Why Does It Break in Chrome and Opera?
* Sidebar Disappears After Anchor Click: Troubleshooting for Chrome and Oper

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!