Position fixed not working in mobile browser

android, css, html, javascript, position

Solution

`position: fixed` doesn't work in most of the older versions of iOS and Blackberry. I have tried this fix in most of the mobile browsers and it worked smoothly without any JavaScript plugins.

Use `-webkit-backface-visibility: hidden;`

.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 50px;
  background: red;
  -webkit-backface-visibility: hidden;
  /*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Most Important*/
}

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

</div>

Problem

How to make an element position fixed in Mobile browser (ios and android) ? Element still scrolls with below code in ios < 5 and android< 4 ``` <html> <head> <style> .fixed{ position:fixed; top:0; left:0; } </style> </head> <body> <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/> </div> </body> </html> ```

Original source