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
Written by Rico Sta. Cruz
Related protips
2 Responses
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/.
Why is it still happening? It's a really old bug.
Have a fresh tip? Share with Coderwall community!
