CSS position:fixed not working in Chrome

I was having some problems when dealing with a fixed header. Basically I wanted to add a simple effect to the header that when scroll down to the page the header would stick to the top.

Original CSS

.header { position: fixed; width: 100%; top; 0; left, 0;}

This worked just fine in IE out of my expectation but it’s just causing some issues when in Chrome.

After few hours searching for the solution, I found that at the moment Chrome cannot render position:fixed on elements under a transformation.

So here is the fix, just add below to your fixed element CSS.

transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/

Hope this can also help you if you are facing the same problems.

Save

Author: Leo

My name is Leo who’s behind this blog. I’ve been working with wordpress since 2010. I’ll write about themes, plugins, tutorials and all about wordpress here. Hope you find it useful!

Leave a Reply

Your email address will not be published. Required fields are marked *