How to Apply Position Fixed in Safari on iOS

John on May 12, 2021

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.