為什麼「position:fixed」在行動瀏覽器中無法正常運作以及如何修復它？

固定位置在行動瀏覽器中不起作用

雖然position:fixed屬性應該在頁面滾動時保持元素固定在螢幕上，它可能無法在iOS 和Android 等舊版本的行動瀏覽器中按預期工作。為了解決這個問題，我們可以利用 -webkit-backface-visibility:hidden 屬性。

-webkit-backface-visibility 屬性用於透過確定是否渲染背面來最佳化元素的渲染效能元素的面。透過將其設為隱藏，瀏覽器會被指示隱藏元素的背面，這解決了position:fixed無法正常運作的問題。

以下是一個示範如何使用此屬性的範例：

<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>

透過新增-webkit-backface-visibility:hidden;對於CSS，具有固定類別的元素即使在舊版的iOS 和Android 瀏覽器中也將保持固定在螢幕上。

以上是為什麼「position:fixed」在行動瀏覽器中無法正常運作以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！