Position fixed not working in mobile browser

javascript android html css position

72,960

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>

72,960

Author by

Vicky Gonsalves

Experienced Fullstack web developer, Full-Time Freelancer, A huge tech enthusiast, and a big fan of everything web, with more than 10 years of commercial experience I'm always looking to work on exciting projects with exciting clients. Full of enthusiasm, hard work and dedication. My new boilerplate for deno RESTful apis: https://github.com/vicky-gonsalves/deno_rest#deno-rest---a-boilerplate-for-deno-restful-apis I have hands on following languages/libraries/Technologies: ► javascript ► Angular ► React ► vue.js ► Node.js ► deno ► Angular Material ► Mongo DB ► php ► Laravel ► css3/SASS/LESS ► IoT (Arduino, Raspberry Pi) ► Amazon AWS ► RESTful Apis ► Heroku ► Kubernetes ► Docker ► Ionic App Framework ► Gulp / Grunt ► Unit testing (Jasmine, Karma, Mocha, Chai, Sinon, Jest, etc) ► NGRX / Redux Upwork: https://www.upwork.com/fl/vickygonsalves StackOverflow Profile: http://stackoverflow.com/users/1548301/vicky-gonsalves Website: http://vickygonsalves.herokuapp.com GitHub: https://github.com/vicky-gonsalves

Updated on July 13, 2020

Comments

Vicky Gonsalves almost 4 years

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>