User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.18 Safari/534.16 Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b10) Gecko/20100101 Firefox/4.0b10 If web-page filled with small repeating CSS gradient background, Firefox 4.0b10 hangs and cannot close tab. Firefox 3.6.3 doesn't hang. CSS code: body { background-image: -moz-linear-gradient( left top, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 2px, rgb(204, 204, 204) 2px, rgb(204, 204, 204) 3px, rgb(255, 255, 255) 3px, rgb(255, 255, 255) 4px ); -moz-background-size: 4px 4px; background-size: 4px 4px; } Reproducible: Always

Confirmed Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b12pre) Gecko/20110207 Firefox/4.0b12pre ID:20110207030345 Brouser does not hang if set gfx.direct2d.disabled to true

Graphics Adapter Description: ATI Radeon HD 4300/4500 Series Vendor ID: 1002 Device ID: 954f Adapter RAM: 512 Adapter Drivers: aticfx64 aticfx64 aticfx32 aticfx32 atiumd64 atidxx64 atiumdag atidxx32 atiumdva atiumd6a atitmm64 Driver Version: 8.812.0.0 Driver Date: 1-4-2011 Direct2D Enabled: true DirectWrite Enabled: true (6.1.7600.20830) WebGL Renderer: Google Inc. -- ANGLE -- OpenGL ES 2.0 (ANGLE 0.0.0.541) GPU Accelerated Windows: 1/1 Direct3D 10

I have a similar tiny gradient as part of a blog design and have had a few users report hangs when visiting; it seems this is the cause. They're all on Windows and all have acceleration on. The ones I've polled also hang on the linked testcase, but don't hang with gfx.direct2d.disabled. (Both ATI and NVidia cards have the same problem. I'm on Linux with acceleration via the proprietary nvidia driver, and I've never had an issue. So, D2D sounds like a likely culprit.) I wish I could be more helpful, but acceleration isn't really my forte; I'd be glad to harvest more data points if something in particular would be useful. Shouldn't this get a bit more attention? Seems like an easy denial-of-service in one of Firefox 4's biggest new features.

This seems like a design people expect to work in the wild. Not getting dos'ed on css3 rules would be good.

This is not a permanent hang; at least on my computer, Firefox does eventually respond. Bas, is there something obvious in the D2D backend that we can fix to make this quicker in the short term?

Hrm, presumably, this probably translates to a load of gradient fills in the backend. Gradients aren't free in Direct2D and these are a lot of them. I'm not sure what we can do here except maybe detect the situation and draw one gradient and then repeat it as an image. Optionally I'd like to check what IE9/10 do but I can't figure out the syntax to get the gradient to work in IE.

Here's a version that works in IE10: http://people.mozilla.org/~jmuizelaar/perf-tests/small-repeating-gradient.html It seems to handle it pretty well.

Actually, maybe there is something we can do. The part here that takes a long time is presumably the gradient stop collection creation. I've looked into this and since we are re-using the same cairo_pattern_t here I might be able to use that to our advantage to optimize this inside the cairo backend.

We won't track this for Firefox 5. If a safe patch becomes available, please feel free to nominate it for approval-mozilla-aurora. tracking -

So, it seems we -do- re-use the cairo_pattern_t however cairo hides this pattern from the surface backend by a copy into a stack based objects whose user-data is simply leaked and we don't get to reuse anything (since essentially we'll have a new stack based cairo_pattern_t next time fill gets called). I'll have to look around and see if I can somehow get to the original cairo_pattern_t so I can store the data on there. See cairo-gstate.c:1175 for the copying logic.

This CSS3 rules crashes Firefox 5 too: background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.3) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0.3) 75%,transparent 75%,transparent); background-image:-moz-repeating-linear-gradient(-45deg,rgba(255,255,255,0.3),rgba(255,255,255,0.3) 1px,transparent 1px,transparent 3px);

Have you had time to look into this Bas?

Yes, Azure fixes this issue due to reusal of gradient realizations.

Having a similar problem with drawing lots of radial gradients with createRadialGradient(). Firefox begins to use a lot of RAM, resulting in the system becoming unresponsive. Disabling D2D in the config resolves the issues.

The bug depends on https://bugzilla.mozilla.org/show_bug.cgi?id=644444

The bug cased on all platform, not just Win7 64bit.

The bug cased on all platforms, not just Win7 64bit.

(In reply to Bas Schouten (:bas) from comment #13) > Yes, Azure fixes this issue due to reusal of gradient realizations. Azure-content doesn't fix the issue for me; we still hang briefly. Curiously we seem to paint the page and *then* hang briefly.

Aaaah, it's because of bug 772726! We paint the *window* with Azure and it's fast, but we then take a *screenshot* using canvas.drawWindow and that uses Thebes/cairo, which is very slow :-(.

Mozilla has released stable Firefox 16 http://www.mozilla.org/en-US/firefox/16.0.1/releasenotes/ and has not fixed the reported bugs related to "repeating-linear-gradient" and "background-size" what brigs the time of Firefox bad UX and lots of websites crashes.

Some fixes for gradient perf issues have gone in recently but they aren't in Firefox 16. You could test Aurora or Nightly if you wanted to see how well they work.

"repeating-linear-gradient" rendering is still slower on Nightly 19 than on other browsers. I expected this issue would be fixed on Firefox 16. "repeating-linear-gradient" on Firefox is printed diffidently than on any other browser like Webkit or Opera, or IE; demo http://jsfiddle.net/laukstein/JBJCt/show/

Please file a bug with a testcase for both of those issues.

(In reply to Binyamin from comment #25) > "repeating-linear-gradient" on Firefox is printed diffidently than on any > other browser like Webkit or Opera, or IE; demo > http://jsfiddle.net/laukstein/JBJCt/show/ Our rendering uses antialiasing, which is generally better. If you were aiming for blocky pixellated lines, you should probably use a background image instead. So I don't think you need to file a bug on that.

I just opened a new ticket https://bugzilla.mozilla.org/show_bug.cgi?id=801523 "CSS3 repeating-linear-gradient difference in visual appearance colors"

Crashing http://jsfiddle.net/laukstein/JBJCt/3/show/

Firefox 16 does not understand syntax like > background: repeating-linear-gradient(315deg, #e7d19c, #e7d19c 1px, rgba(255,255,255,0) 1px, rgba(231,209,156,0) 3px) 0 0/4px 4px #f5be3e; Nightly 19 renders fine. Demo http://jsfiddle.net/laukstein/JBJCt/2/show/

This is still broken in Firefox 23, and seems like a relatively serious bug. It doesn't just seem to take a long time rendering, but even after rendered significantly impacts the performance on any other actions on the page. Is anyone actively addressing this? http://jsfiddle.net/pv3bg/1/

Bas, this bug has not been updated in a couple years. Is it still valid?