background-size: cover + UI lag while scrolling




7 years ago
5 years ago


(Reporter: inli3u, Unassigned)


Firefox Tracking Flags

(Not tracked)




7 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11

Steps to reproduce:

Visited At top of the page is a giant box with a blurred background image. That background image fits to the available space using "background-size: cover".

Actual results:

The CSS works perfectly but the UI is very laggy when scrolling or resizing the window. Disabling this property makes everything snappy again. I'm on a 3.2 GHz Intel Core i3 with 8BG of ram. The background image is pretty large so I'm sure the massive down sampling is the cause of the lag. However if the down sampled image were cached I would imagine scroll speed shouldn't be affected.

Expected results:

Site should be reasonably responsive. This obviously isn't a huge deal and I'm very thankful for the CSS3 support, however I just wanted to point this out. Let me know if I should take the time to isolate this as a separate test page.

Comment 1

6 years ago
We're running into this issue on Marketplace. Using background-size absolutely *kills* page performance. Will produce a minimal testcase.
Component: Untriaged → General
Product: Firefox → Core
Version: 10 Branch → unspecified
Presumably a "tiling + scaling == slow" issue?
Component: General → Graphics
Oh, and note there are existing bugs on caching scaled versions of images.  Right now there is no such caching, so each paint requires a rescale.

Comment 4

6 years ago
(In reply to Boris Zbarsky (:bz) from comment #2)
> Presumably a "tiling + scaling == slow" issue?

Yup- that's it precisely.

Comment 5

6 years ago
For the Marketplace bugs that trigger this, see Bug 846470 and Bug 846459 (though it'll be fixed tomorrow, but should be reproducible with adjusting background-size manually). 

Also, Bug 846315 is probably related.
You need to log in before you can comment on or make changes to this bug.