Last Updated: February 25, 2016
· hdennison

Position fixed on mobile

One of the most common headaches when making CSS for mobile, is the inconsistent, buggy and awful implementation of position:fixed;

There's a lot of resources explaining this, so I'll just throw a bunch of links instead of writing a new post about it.

The problem (iOS)

Issues with position fixed scrolling on iOS - Remy Sharp

The problem (cross device)

Mobile fixed position - Brad Frost

How it should behave

...and it does on modern mobile browsers:

Budding consensus on mobile position:fixed - Peter-Paul Koch (PPK)

Test page

Just CSS, no JS fixes applied.
position:fixed test page

The 'fix'

I think quite all alternatives are explained on Brad Frost's post, so I'll link again to it:

Mobile fixed position: Javascript solutions - Brad Frost

Mobile fixed position: Considerations - Brad Frost