Back to blog

Position:fixed not working in Chrome/webkit?

May 10, 2014 - Posted in CSS Posted by:

I’ve been doing a lot of front end development recently. This means a lot of responsive sites, which in turn means progressive enhancement, graceful degradation and performance optimisation for mobile devices.

When you hear ‘performance optimisation’ for mobile devices, people often think of fewer HTTP requests because of higher latency across mobile networks. For example using image sprites for background images and combining and minifying CSS and Javascript. That is alongside thinking of other things like gzipping or deflating content, compressing jpegs, caching static content, serving static content from a CDN, putting the JavaScript at the end of the document etc. The truth is these things should be implemented regardless of it is mobile optimised or not.

There are however, some other considerations to do with rendering that aren’t necessarily immediately obvious. For example:

The translate3d does have a problem though: it breaks position: fixed in webkit and causes it to render as position absolute. So, if you were creating an off-canvas menu for example and transitioning the whole site, you wouldn’t be able to use anything with position: fixed inside that. I ran into this problem when I had a fixed nav.

See this issue on animate.css for a bit more info: https://github.com/daneden/animate.css/issues/26