1

I'm trying to implement a background image that auto resizes depeding on the size of the screen using css3. I've encountered a problem with Chrome that makes scrolling the website vertically really laggy. This doesn't happen on opera, firefox, or IE. Am I missing a declaration in my css code or is Chrome the culprit? 

 body { 
 background: #000 url(../images/bg.jpg) no-repeat center center fixed;  
 -webkit-background-size: cover;    
 -moz-background-size: cover;   
 -o-background-size: cover;  
 padding: 0; 
 margin: 0 }
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
RomeNYRR
  • 877
  • 4
  • 19
  • 34

2 Answers2

0

I might be a bit late, but I was having a similar problem myself, found the question answered here:

My fixed background made scrolling the site very slow, what can I do to improve it?

It seems the background-size property is what was causing the issue. Of course removing that raises other issues with certain browsers, but maybe using this Jquery plugin might solve that issue, haven't tested it myself though: http://srobbin.com/jquery-plugins/backstretch/

Community
  • 1
  • 1
bestfriendsforever
  • 351
  • 2
  • 6
  • 18
-1

Probably its all up to rendering in mac os. Mac os using opengl instead of Direct3d in windows. Try to disable\enable hardware acceleration in chrome and check how it works

Avdept
  • 2,261
  • 2
  • 26
  • 48