Why is Position: Fixed Not Working in Older Mobile Browsers?

Position Fixed Not Working in Mobile Browser

Problem:

Making an element fixed in position using CSS's position: fixed may not work in older versions of iOS and Android mobile browsers. The element scrolls with the page, ignoring the fixed positioning.

Cause:

older browsers like iOS

Solution:

Use -webkit-backface-visibility: hidden;

This CSS property forces the browser to treat the element as a 3D element, which enables the fixed positioning.

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

Sample 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>sample text
  <br>sample text
  <br>sample text
  <br>sample text
</div></code>

This solution has been tested and works smoothly in most mobile browsers, including older versions of iOS and Android.

The above is the detailed content of Why is Position: Fixed Not Working in Older Mobile Browsers?. For more information, please follow other related articles on the PHP Chinese website!