Position Fixed Not Working in Mobile Browser

Position fixed not working in mobile browser

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>

position: fixed doesn't work on chrome/firefox mobile mockup (and mobile), but works when I resize window

This is kind of late but I solved it a while back adding this line to the <head> of the html document

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

seems the minimum-scale-1 is the crucial part.

Position fixed on chrome mobile causing element to move on scroll up/down

I found out.

For some god forsaken reason, my beloved Google Chrome on mobile require minimum-scale=1 on the viewport meta.

<meta name="viewport" content="minimum-scale=1">

It works now.

Position Fixed Not Working in Mobile Browser