611963 - border-radius makes ff4 slow, unresponsive, high CPU

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[Spiros Ioannou]

User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0b8pre) Gecko/20101112 Firefox/4.0b8pre
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b8pre) Gecko/20101112 Firefox/4.0b8pre

Tested with recent nightly. Viewing this page makes ff4 unresponsive and cpu raises when trying to scroll and on page load. This doesn't happen with the same page and ff 3.6 (with -moz-border-radius in this case)
The test page contains an isolated part from a dynamic system, converted to static pages, with javascript and most css removed. When removing the last line in the css (border-radius: 15px 15px 15px 15px;) the page becomes responsive again

Reproducible: Always

Steps to Reproduce:
1.Load the page in the URL. It takes a lot of time.
2.try to scroll. CPU gets very high, the page is unusable.
3.



I'm marking this as major since it prevents pages with border-radius to work.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Spiros, does turning off accelerated layers make this page fast, by any chance?

Comment 2

[Joe Drew (not getting mail)]

Please renom if & when this bug gets confirmed.

Comment 3

[Spiros Ioannou]

(In reply to comment #1)
> Spiros, does turning off accelerated layers make this page fast, by any chance?

I changed (with today's nightly) layers.accelerate-all to false, and layers.accelerate-none to true, restarted and retried. No change at all.
-S

Comment 4

[Spiros Ioannou]

it is not so difficult to confirm, just click the link and scroll

Comment 5

[Bas Schouten (:bas.schouten)]

It works just fine for me on Windows 7 with Direct2D. But indeed when using GDI it's quite slow. I remember roc telling me about some stuff we do for border-radius that can make it quite slow. I'm guessing it's something fillrate bound which is why it doesn't show with Direct2D.

Looping in roc.

Comment 6

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I'm pretty sure this is another case of clipping to border-radius being slow due to applying a mask for every paint operation.

Comment 7

[Timothy Nikkel (:tnikkel)]

The page doesn't seem to use overflow: hidden, so I'm a little confused as to why Firefox 3.6 is fast but mozilla-central is slow.

Comment 8

[Robert O'Callahan (:roc) (email my personal email if necessary)]

The element with border-radius is overflow:auto.

Comment 9

[Timothy Nikkel (:tnikkel)]

cairo 1.10 speeds this up significantly. (Not saying we shouldn't do the pushgroup thing, I'm working on that.)

Comment 10

[Spiros Ioannou]

tested with today's nightly, still exists.

Comment 11

[Spiros Ioannou]

I do not see this improvement, my cpu is amd athlon X2 4200+ and graphics card is 9800GT.

Scrolling the test page with the mouse (dragging the scrollbar to the bottom) takes about 5 seconds to complete (it should be instant), while the scrollbar stops at 2-3 positions to recalculate something. I'd say this is something to be fixed for the release.

Comment 12

[Timothy Nikkel (:tnikkel)]

This is much improved for me in the latest nightly.

Comment 13

[Spiros Ioannou]

yes it is improved indeed. It takes about 2.5-3 seconds to scroll to bottom, it's almost double speed than before. It is not fixed yet though.

Comment 14

[Timothy Nikkel (:tnikkel)]

So I did some testing using this bookmarklet to measure scroll speed.
javascript:void((function(){var%20i=0;var%20start=Date.now();function%20f(){if(++i==50){alert((Date.now()-start)+"ms");return;}window.scrollTo(0,i*5);setTimeout(f,10);}f();})())
I'm using Linux.

On repeated trials on http://image.ece.ntua.gr/~sivann/test/ff4/ffslow.htm
FF4 current nightly
~490ms
FF3.6
~620ms
Chrome stable (9.0.597.84)
~510ms

http://www.ietf.org/rfc/rfc2631.txt (a text file, should scroll fast, a baseline)
FF4 current nightly
~460ms
FF3.6
~510ms
Chrome stable (9.0.597.84)
~510ms

I also tried removing the border radius on http://image.ece.ntua.gr/~sivann/test/ff4/ffslow.htm and I got about the same numbers (and we don't use any rounded rect clips on the page as expected).

Do you find the page to be slow in relation to other browsers or slow in relation to other pages in Firefox? Do you use smooth scrolling?

Comment 15

[Spiros Ioannou]

Slow in relation to FF3 and other browsers. The difference is huge. Initial rendering doesn't seem slower, scrolling does.

Comment 16

[Spiros Ioannou]

I changed PC lately and, I tested your script with today's nightly and chrome 9.0.597.107:

chrome: 490-500
ff4: 562-660
resolution is 1680x1050, browsers fullscreen. 
Reducing the browser size, reduces FF4 times closer to chrome's one. Chrome takes the same time to scroll, regardless of window size, which makes me believe that the 500ms are due to some javascript time limit in loops.

The problem is I no longer have access to a slow PC, my new PC is very fast (i7/2600). In my old PC the page was too slow, down to unusable. Completely unusable, probably due to the high CPU usage. This doesn't seem to be fixed, since cpu usage is still high while scrolling, although the result is negligeble in my fast cpu.

Comment 17

[Spiros Ioannou]

Tested again in my work's pc (Intel E6850/Vista)

Chrome: ~560ms
FF4: ~1200ms
FF3: ~700ms

So FF4 much slower than FF3, and this is far worse in slower PCs.
For this comparison, I added -moz-border-radius as well to the stylesheet.

Comment 18

[Ali Juma [:ajuma]]

Testing on a Windows 7 machine, with hardware acceleration disabled, scrolling the testcase is horribly slow on Firefox 4b9, somewhat improved (but still not great) on Firefox 4 release, and smooth on Firefox 8. CPU usage improves significantly from Firefox 4b9 to Firefox 4, and improves some more from Firefox 4 to Firefox 8.

With hardware acceleration enabled, scrolling is somewhat slow on Firefox 4b9, and smooth in Firefox 4 release and Firefox 8. CPU usage stays about the same.