Mengapa Kedudukan: Tetap Tidak Berfungsi dalam Pelayar Mudah Alih Lama?

Kedudukan Tetap Tidak Berfungsi dalam Pelayar Mudah Alih

Masalah:

Membuat elemen tetap pada kedudukan menggunakan kedudukan CSS: tetap mungkin tidak berfungsi dalam versi lama penyemak imbas mudah alih iOS dan Android. Elemen menatal dengan halaman, mengabaikan kedudukan tetap.

Punca:

pelayar lama seperti iOS < 5 dan Android < 4 tidak menyokong sepenuhnya kedudukan: harta tetap.

Penyelesaian:

Gunakan -webkit-backface-visibility: hidden;

Sifat CSS ini memaksa penyemak imbas untuk menganggap elemen sebagai elemen 3D, yang membolehkan kedudukan tetap.

<code class="css">.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 50px;
  background: red;
  -webkit-backface-visibility: hidden; /*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Most Important*/
}

Kod Contoh:

  Hi I m Position Fixed


  sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text
  
sample text

Penyelesaian ini telah diuji dan berfungsi dengan lancar dalam kebanyakan penyemak imbas mudah alih, termasuk versi iOS dan Android yang lebih lama.
Atas ialah kandungan terperinci Mengapa Kedudukan: Tetap Tidak Berfungsi dalam Pelayar Mudah Alih Lama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!