I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

Budding consensus on mobile position: fixed

OK, there’s a budding consensus on how position: fixed should work on mobile. Android WebKit and Chrome both do it, and in iOS6 Safari has dropped the weird iOS5 stuff and moved to a sensible solution.

Instead of explaining it in words, here’s a video. HTC One X, Android 4.0.3, Android WebKit default browser. Test page.

As you see the fixed layer is fixed relative to the visual viewport. Better still, the width: 100% is also interpreted relative to the visual viewport, which means the layer is resized when the user zooms in, and the text wrapped. Compare this behaviour to the old ones.

The only problem is that the fixed layer is sometimes not very responsive. You see that in the movie. Apple has mostly solved the problem, but it’s worse in Chrome, where the layer will move during zoom and only switch back to its proper position after the zoom has ended. But that’ll be fixed in a future version.

If you saw my recent From the Front or Fronteers presentations, I unfortunately gave you false information. It turns out that the Android WebKit on the Galaxy Note also supports this but only if you change the orientation. This is obviously a bug, and I was not aware of it until yesterday. So Android WebKit does support proper position: fixed.

Oh, and I’m going to test this in other mobile browsers, too. Opera and BlackBerry do not support it; I already found that out. But I’m going to treat this behaviour as the default that all other browsers should move towards.