Mengapakah `position: fixed` tidak berfungsi dengan betul dalam penyemak imbas mudah alih dan bagaimana saya boleh membetulkannya?

Kedudukan tetap tidak berfungsi dalam penyemak imbas mudah alih

Sementara kedudukan: sifat tetap harus mengekalkan elemen tetap pada skrin semasa halaman menatal, ia mungkin tidak berfungsi seperti yang diharapkan dalam versi lama penyemak imbas mudah alih seperti iOS dan Android. Untuk mengatasi isu ini, kita boleh menggunakan -webkit-backface-visibility: hidden property.

Properti -webkit-backface-visibility digunakan untuk mengoptimumkan prestasi pemaparan elemen dengan menentukan sama ada hendak memaparkan belakang muka unsur. Dengan menetapkannya kepada tersembunyi, penyemak imbas diarahkan untuk menyembunyikan muka belakang elemen, yang menangani masalah dengan kedudukan: tetap tidak berfungsi dengan betul.

Berikut ialah contoh yang menunjukkan cara menggunakan sifat ini:

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

<code class="html"><div class="fixed">
  Hi I m Position Fixed
</div>
<div>
  sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>
</div></code>

Dengan menambahkan -webkit-backface-visibility: hidden; kepada CSS, elemen dengan kelas tetap akan kekal tetap pada skrin walaupun dalam versi lama penyemak imbas iOS dan Android.

Atas ialah kandungan terperinci Mengapakah `position: fixed` tidak berfungsi dengan betul dalam penyemak imbas mudah alih dan bagaimana saya boleh membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!