Closed Bug 632324 Opened 12 years ago Closed 6 years ago

[D2D] Very long time spent rendering small repeating CSS gradient background


(Core :: Graphics, defect)

Windows 7
Not set



Tracking Status
firefox5 - wontfix
firefox6 - ---
blocking2.0 --- .x+


(Reporter: u174286, Assigned: bas.schouten)




(Keywords: perf, regression)


(1 file)

19.76 KB, application/zip
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
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
blocking2.0: --- → ?
Component: Style System (CSS) → Graphics
Ever confirmed: true
Keywords: regression
QA Contact: style-system → thebes
Version: unspecified → Trunk
Attached file WinDbg log
  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
  GPU Accelerated Windows: 1/1 Direct3D 10
Keywords: hang
Summary: Firefox 4.0b10 hangs if page filled with small repeating CSS gradient background → [D2D] Firefox 4.0b10 hangs if page filled with small repeating CSS gradient background
blocking2.0: ? → .x
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?
Assignee: nobody → bas.schouten
Keywords: hang
Summary: [D2D] Firefox 4.0b10 hangs if page filled with small repeating CSS gradient background → [D2D] Very long time spent rendering small repeating CSS gradient background
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.
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);
Keywords: perf
Have you had time to look into this Bas?
QA Contact: thebes → bas.schouten
Yes, Azure fixes this issue due to reusal of gradient realizations.
Depends on: 715768
Duplicate of this bug: 721229
Duplicate of this bug: 726303
Duplicate of this bug: 735470
No longer depends on: 715768
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.
Blocks: 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 :-(.
Depends on: 772726
Mozilla has released stable Firefox 16 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
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

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 "CSS3 repeating-linear-gradient difference in visual appearance colors"
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.

No longer blocks: 825244
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?
Bas, this bug has not been updated in a couple years. Is it still valid?
Flags: needinfo?(bas)
Closed: 6 years ago
Flags: needinfo?(bas)
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.