How to Apply Position Fixed in Safari on iOS

You will notice that the position: fixed CSS rules don't work as intended in Safaris on iOS. To make it work use the following CSS instead:


.element {
   overflow: hidden;
   -webkit-overflow-scrolling: touch;


Now the element will have the behaviour of being static even when the user attempts to swipe up/down.


This is especially useful for modal dialogues where scrolling on the rest of the page should be disabled.