A nice and snappy site I was working on became laggy once the the background image became fixed instead of scrollable by adding background-attachment: fixed to the css. Not cool at all. Weirdly, this was in both Chrome and Opera, but there was no noticeable lagging on Firefox or seemingly Safari (although apparently, reading around, it’s possible under certain circumstances on both e.g. when having a truck-load of tabs also opened — which could happen to me). Weirder still, other sites I’ve done have this setting without causing any appreciable lag caused by it, but it seems to be an interaction with the amount of (more complex) elements involved on the page.
What’s happening is that Chrome and Opera are repainting the browser window every scroll. To fix, adding the following to the css will likely resolve it:
-webkit-transform:translatez(0);Warning: Enabling this can also break position:fixed elements, e.g. a sticky navbar. See bug report here: https://code.google.com/p/chromium/issues/detail?id=20574 In this case, such frustration may be avoided by applying, if possible, the setting to the style of an inner element which is interacting poorly with the fixed background (e.g semi-transparent divs) rather than to the body as may be tempting.
Further warning: It’s well worth noting is that this option is basically a hack. See this blog post here. Seemingly it doesn’t affect Firefox because it already forces offloading of work to the GPU while Chrome and Opera don’t, which enabling the above option instructs a WebKit browser to do.
As such, if you don’t want to enable this option, such as in a case where you notice it’s straining old mobile devices, backstretch does somewhat similar via jquery (my main gripe with it is that it if the page has an even slight delay in loading, the background image does not appear immediately), which can be found here: http://srobbin.com/jquery-plugins/backstretch/.
Peter
Peter's Programming Problems 