Improve scroll performance of Chrome when using background-size: cover;
Full page background images
We all know the great post by Chris Coyier about scaling background images to the dimensions of your browser.
That is very neat and all, but you will definitely encounter performance issues when using them: very very poor scroll performance in mainly the Mac versions of Google Chrome. And as it seems, this will remain a bug for some time according to the issue tracker of Chromium.
The problem
So, let's go ahead and do it the classic way.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}When applied to the html tag, this will kick in a nice full page background image, but also a very laggy scroll experience as mentioned before. To be precise: a merely 6 frames per second.
The solution
Just apply the following style to the html tag and behold an improvement of 600% in frame rate.
-webkit-transform: translate3d(0,0,0);A whopping 38 frames per second! Smooth as we like it.
Written by René Ras
Related protips
5 Responses
Thanks for the tip! Would be great to hear of other performance increases with background-size.
That's amazing. For me the performance increase was about 100% in Safari for a page with background-position: fixed;.
Thanks a lot.
Be carful using translate3d or translateZ hacks on large elements or the whole document!
These hacks work by compositing the element on the graphics card rather than the CPU. This works great on desktop machines where there's processing power to spare, but on mobile moving massive amounts of data in and out of the graphics chip can negatively impact performance.
Paul Lewis has a great article on this – http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
You definitely have a good way to present - I actually applied it to the project I am working on - and for some reason it became buggy. I was working on a parallax website.
The translateZ hack didn't work for me but I was able to get the same effect with a different method.
Make a div as the first child of body. Move the background-image from body to that div. Take off the 'fixed' from the background image property and set position: fixed on the div. That should end up creating the same effect.
You might have to add a few other styles like width/height: 100% to get the div to stretch the full length of the viewport and z-index: -1 to drop the div below the other content.
Have a fresh tip? Share with Coderwall community!
