Last Updated: February 25, 2016
·
30.44K
· rstacruz

Don't mix position:fixed with CSS transforms

In Webkit, this can lead to disaster. I ran across this issue in Chrome20.

I'm going to try to reduce the scenarios I ran into. (Disclaimer: I haven't tested these in isolation.)

Scenario one

.nav { -webkit-transform: translate3d(0,0,0); }
.nav ul { position: fixed; top: 0; left: 0; }

Your intended effect is to pin the ul to the top-left of the viewport, but in this case, it will be to the top-left of the .nav because of the CSS transform.

Scenario two

.nav { -webkit-transform: translate3d(0, 0, 0); position: fixed; }
.nav iframe { ... }

If you have an iframe (like a Facebook like or Twitter share button) inside the .nav, it will not be clickable.

Links

2 Responses
Add your response

I experienced this as well. It's quite a strange behavior as fixed positioned elements should be fixed to the viewport.

On a side note, Eric Meyer has a related topic on his blog - http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/.

over 1 year ago ·

Why is it still happening? It's a really old bug.

over 1 year ago ·