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>