Position fixed not working in mobile browser

by

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>

More Related Contents:

  1. Retrieve the position (X,Y) of an HTML element
  2. Close ad to continue as free user?
  3. How to add a black shadow on top of a div block with background image?
  4. How to read with JavaScript [closed]
  5. How do you read CSS rule values with JavaScript?
  6. Disabling browser print options (headers, footers, margins) from page?
  7. HTML selected option background-color CSS style
  8. How to dynamically create ‘@-Keyframe’ CSS animations?
  9. Make anchor link go some pixels above where it’s linked to
  10. Where should I put the CSS and Javascript code in an HTML webpage?
  11. Text blinking jQuery
  12. Opening new window in HTML for target=”_blank”
  13. Can I apply CSS to the elements within an iframe?
  14. “pointer-events: none” does not work in IE9 and IE10
  15. Div Z-Index issue with Flash movie
  16. Dark mode flickers a white background for a millisecond on reload
  17. collapse and expand tabs jquery / simple accordion
  18. How to trigger CSS “hover state” using Javascript? [duplicate]
  19. Remove scrollbar but not scrolling functionality [duplicate]
  20. Gaussian Blur onHover Using jQuery
  21. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  22. fade effect using javascript no jquery?
  23. Placeholder for contenteditable div
  24. How to get CSS class property in Javascript?
  25. Setting the height of a DIV dynamically
  26. How to keep elements non-refreshed
  27. assign color to mouse cursor using CSS
  28. Find caret position in textarea in pixels [duplicate]
  29. Center an Image vertically and horizontally using CSS
  30. Change background on button click, using CSS only? [duplicate]

Leave a Comment