3

I was using background-attachment:fixed; on my website but it was causing Chrome to lag for some users. Is there a way to have the same effect without causing lag? Lag has stopped since I removed it but I much preferred the look for my site.

Everdred
  • 31
  • 1
  • 4
  • May be reading this helps? http://stackoverflow.com/questions/7033979/my-fixed-background-made-scrolling-the-site-very-slow-what-can-i-do-to-improve – Quincy Nov 01 '11 at 07:23
  • 1
    @Quincy, I did see this. Couldn't figure any alternative methods from it. Only way I have found is to change the attachment to scroll (default). – Everdred Nov 01 '11 at 08:54

1 Answers1

3

It is actually a known bug since 2011, the background-attachment:fixed rule causes the browser to repaint the background on every scroll, which is an issue on large screens and Retina displays.

There is a workaround, add this rule to your css stylesheet:

html{
  -webkit-transform: translate3d(0,0,0);
}
GuCier
  • 6,919
  • 1
  • 29
  • 36
  • This seems to stop the "background-attachment:fixed" rule applying. – jshjohnson May 28 '15 at 18:27
  • 1
    One thing, make sure your image size is not large. I have tried adding a 500kb image as background and fixed attached. It was lagging even I have added translate3d. – Billy Halim Apr 14 '16 at 14:46