Rumah >hujung hadapan web >tutorial css >Mengapa Peralihan CSS Saya Menyebabkan Berkelip Pada Pemuatan Halaman dalam Chrome?

Mengapa Peralihan CSS Saya Menyebabkan Berkelip Pada Pemuatan Halaman dalam Chrome?

Susan Sarandon
Susan Sarandonasal
2024-10-31 05:46:02865semak imbas

Why Does My CSS Transition Cause Flickering At Page Load in Chrome?

Hapuskan Peralihan CSS Berkelip pada Pemuatan Halaman

Masalah:

Peralihan CSS mencetuskan yang tidak diingini kesan berkelip semasa memuatkan halaman, mengalihkan elemen daripada hitam kepada warna yang ditetapkan.

Punca:

Pepijat dalam Chrome memulakan peralihan CSS apabila halaman web mengandungi < borang> elemen.

Penyelesaian:

Untuk menyelesaikan isu kelipan:

  1. Tambah Tag:

    Sertakan tag dengan satu ruang ke dalam pengaki halaman:

    <code class="html"><script> </script></code>
  2. Gunakan SASS atau Kurang:

    Menggabungkan prapemproses seperti SASS atau Less untuk dibalut pengisytiharan peralihan dalam fungsi:

    <code class="sass">.class {
      @transition(color .2s);
    
      color: #000;
    
      &:hover {
        color: #FFFF00;
      }
    }</code>

Nota Tambahan:

  • Jejak kemajuan pepijat di https://crbug .com/332189 dan https://crbug.com/167083.
  • Penyelesaian yang dibentangkan menangani penyemak imbas Chrome secara khusus.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Menyebabkan Berkelip Pada Pemuatan Halaman dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn