Poor performance of Chrome and Firefox using background cover

[the better twin]

Im using

background-size:cover;

to display a full screen background and it works fine in IE9, but in firefox and chrome the performance is horrible. The scroll speed is reduced and its practically a slideshow when scrolling up or down (especially in chrome).

Ive tried compressing the image to a very small size (30kbs, original is 200kb) but that has no effect).

Is there anything else i can do to optomise it or something besides turning to a jquery alternative?

[Cupcakes]

Do you have a working example of your code or a live preview? I've used cover before and haven't had any bugs like that before.

[the better twin]

  On 22/12/2010 at 10:01, Cupcakes said:

Do you have a working example of your code or a live preview? I've used cover before and haven't had any bugs like that before.

yeah i uploaded it here so far

http://thebettertwin.co.uk/siteredesign

[DrJohnSmitherson]

I tried it in FF 4 b 9pre and it's perfectly fine for me

1920x1080 I even shrank the window some to scroll more and still had no problems.

My system, if it helps

Win7

Q6600 @ 3GHz

4GB ram

[yowanvista]

Works fine in FF4.0B8

[dancedar]

I've always found Firefox lags/slugs with fixed background images, really annoying.

[ViperAFK]

  On 22/12/2010 at 16:42, dancedar said:

I've always found Firefox lags/slugs with fixed background images, really annoying.

Firefox 4 with hardware acceleration fixes this though. Site in the OP scrolls fine in firefox 4 beta9pre for me, its a little laggy in opera 11 (which usually has no issues with fixed background sites for me). Its REALLY laggy in chrome 10 dev, and ie9 beta scrolls the best of them all (totally smooth)

[CrispCreations]

  On 22/12/2010 at 16:42, dancedar said:

I've always found Firefox lags/slugs with fixed background images, really annoying.

I've seen the same thing, but not so much with recent versions.

One problem I did come across a while back when a client had a similar issue, as odd as it seems, was graphics card drivers, whereby he was using the generic windows drivers from a vanilla install instead of the manufacturers.

[~Johnny]

I think it's compounded by the fact that you're also using transparent PNG's on top of the fixed background - which will make scrolling even slower on those browsers than they already would be with just the fixed background.<img>

[The_Decryptor Veteran]

Performance is pretty bad in 3.6 and such, since using background-size causes it to re-scale the image on every paint (since it isn't cached), position:fixed makes it even worse since it causes the whole window to be repainted. Other browsers don't have this issue because they paint differently and cache the result of scaling images.

It won't lag in Firefox 4 since they now cache the results of scaling images and such, and cache the parts of web pages separately so re-painting the entire window is just a quick copy.

[MarkusDarkus]

Massive lag in Chrome (Whatever the latest version is) :(

[Raa]

Just tested in IE8, no issues at all.

For Chrome users : Have you tried the latest nightly build to see if it's any different?

[Steven P. Administrators]

Works fine here too Minefield 4 preb9

[+John. Subscriber¹]

Bad lag in Chrome 10.x

[TemperingPick]

Yeah, same lag here on the latest Chrome Dev edition and it works just fine in IE8.

[Salty Wagyu]

Yup choppy scrolling in FF 3.6. It's the same with sites like Shopto.net which I imagine is using that code as well for background display. Of course it's fine in FF4 betas because it's fixed (or accelerated).

[Asharae]

Stupid lag in Chrome Dev on Mac here, weird that is :(

[ashpowell]

no lag at all for me on chrome 10.0.612.3, very odd...

anyway,

in your css try replacing

-o-background-size:cover;

with

background-size: cover;

[the better twin]

  On 23/12/2010 at 12:39, Temperingpick said:

Yeah, same lag here on the latest Chrome Dev edition and it works just fine in IE8.

well its a css 3 property so it wouldnt affect IE8 as it doesnt work at all.

  On 27/12/2010 at 15:25, ashpowell said:

no lag at all for me on chrome 10.0.612.3, very odd...

anyway,

in your css try replacing

-o-background-size:cover;

with

background-size: cover;

Thats just the opera prefix, i do use background-cover as well, although i think latest versions of Opera have dropped the prefix.

Thanks for all the replies people. Seems like Chrome is the main culprit. I think i will probably resort to a javascript alternative cos that will deal with browsers that dont support css3 as well.

Hopefully this is something chrome will fix soon and its strange to see IE performing the best for a change.

  On 23/12/2010 at 12:39, Temperingpick said:

Yeah, same lag here on the latest Chrome Dev edition and it works just fine in IE8.

well its a css 3 property so it wouldnt affect IE8 as it doesnt work at all.

  On 27/12/2010 at 15:25, ashpowell said:

no lag at all for me on chrome 10.0.612.3, very odd...

anyway,

in your css try replacing

-o-background-size:cover;

with

background-size: cover;

Thats just the opera prefix, i do use background-cover as well, although i think latest versions of Opera have dropped the prefix.

Thanks for all the replies people. Seems like Chrome is the main culprit. I think i will probably resort to a javascript alternative cos that will deal with browsers that dont support css3 as well.

Hopefully this is something chrome will fix soon and its strange to see IE performing the best for a change.

[RoomKid]

If you're on Forrst:

http://forrst.com/po...round_Image-CJI

Try this(taken from the post by Chris Coyier) :

body { 
        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;
}