644444 - Using Background-Size Combined With -moz-repeating-linear-gradient hangs Firefox

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[development]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0

The following code crashes Firefox 4.0 on both Windows 7 and Mac OSX 10.6:

body
{
background: #c1d099 -moz-repeating-linear-gradient(left top 0deg, rgba(255,255,255,0.0), rgba(255,255,255,0.8) 2px) repeat;
background-size: 2px 2px;
}

This code works fine in Firefox 3.6. It should create a small repeating background-image of two colors alternating back and forth vertically.

Reproducible: Always

Steps to Reproduce:
body
{
background: #c1d099 -moz-repeating-linear-gradient(left top 0deg, rgba(255,255,255,0.0), rgba(255,255,255,0.8) 2px) repeat;
background-size: 2px 2px;
}
Actual Results:  
Firefox hangs forever. I'm required to use the task manager to close my browser.

Expected Results:  
It should create a small repeating background-image of two colors alternating back and forth vertically.

Since this occurred on both Firefox for the Mac and on Windows, I don't believe my computer's hardware has anything to do with it.

Comment 1

[Ed Morley [:emorley]]

Confirmed using the testcase in the URL field, with Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.2a1pre) Gecko/20110323 Firefox/4.2a1pre ID:20110323074443.

Comment 2

[Mats Palmgren (inactive)]

It hangs on Linux too, pegging the X server at 100% CPU.

The problem is the gradient tile painting loops at:
http://mxr.mozilla.org/mozilla-central/source/layout/base/nsCSSRendering.cpp#2160
the inner loop will execute ~550000 times!

Comment 3

[Kevin Brosnan [Ex-Mozilla]]

Seems like a dupe of bug 632324. I don't crash on Linux but the testcase does make Firefox sluggish.

Comment 4

[Binyamin]

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);

Comment 5

[Binyamin]

Of course still crashing on using CSS3 `background-size` with `-moz-linear-gradient` or `-moz-repeating-linear-gradient`. `background-size` breaks down FF4 and FF5.

Comment 6

[Binyamin]

Crashes even on Firefox 7.0.1. Still not fixed since FF4+.

Comment 7

[Binyamin]

Crashes also FF8.

Comment 8

[Kevin Brosnan [Ex-Mozilla]]

Until this bug is fixed that is expected. No need to comment unless the behavior changes to no crashing.

Comment 9

[A. Lepe]

Probably close related to this bug, we are having a great performance issue with Windows 7 and FF9. Having a CSS background composed of 3 linear gradients:

background: -moz-repeating-linear-gradient(left top 0deg, rgba(150, 150, 150, 0.1), transparent 1px, transparent 5px, transparent 6px) repeat scroll 0 0pt,
            -moz-repeating-linear-gradient(left top 47deg, rgba(150, 150, 150, 0.1), transparent 1px, transparent 5px, transparent 6px) repeat scroll 0 0pt,
            -moz-repeating-linear-gradient(left top -47deg, rgba(150, 150, 150, 0.1), transparent 1px, transparent 5px, transparent 6px) repeat scroll 0 0 transparent;

It takes up to 10 seconds to display. Any other CSS events, like showing or hiding a div over that background using only css, take few seconds as well to fire.

I tested in 3 different computers, all running Windows 7 and the problem is the same. On Windows XP and Linux there is no such problem. 

I removed the background and it works fine. So I can confirm it.

Comment 10

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

Can you file a new bug for that please? With a testcase? That probably isn't related to this bug since background-size appears to not be involved.

Comment 11

[A. Lepe]

@Robert: Ok, I created a new bug: https://bugzilla.mozilla.org/show_bug.cgi?id=713992
Thanks!

Comment 12

[Binyamin]

Good news on unprefixing Web http://hacks.mozilla.org/2012/07/aurora-16-is-out/
Unfortunately Firefox 16 release unprefixed "repeating-linear-gradient" with unresolved this bug will bring Firefox bad experience and tons of failures.

Comment 13

[Binyamin]

Hopefully it will be fixed before Firefox 16 release date 2012-10-09 https://wiki.mozilla.org/RapidRelease/Calendar

Comment 14

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

The patch in bug 768775 should fix this.

Comment 15

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

Fixed in bug 768775.

Comment 16

[Binyamin]

@Robert, patch in bug #768775 did not fix it. The bug still is not fixed.
http://laukstein.com `repeating-linear-gradient` still is unusable slow on Nightly 17.0a1 (2012-08-21).

Comment 17

[Binyamin]

Attachment: about:support data.

`repeating-linear-gradient` still is unusable slow on Nightly 17.0a1 (2012-08-21). Patch in bug #768775 did not fix it.

Comment 18

[Binyamin]

(Platform: Win8 64bit, Win7 64bit probably else Windows versions too.)

Comment 19

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

Binyamin, do you have D2D enabled in about:support?

Comment 20

[Binyamin]

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #19)
> Binyamin, do you have D2D enabled in about:support?

@Robert, as you can see in full about:support report in attachment 654096 [details] https://bugzilla.mozilla.org/attachment.cgi?id=654096 :

Direct2D Enabled: true

Comment 21

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

Note that if you remove background-size:4px 4px from your page, it looks the same and is much faster.

Comment 22

[Binyamin]

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #21)
> Note that if you remove background-size:4px 4px from your page, it looks the
> same and is much faster.

@Robert, it is an other Firefox rendering bug. You will see the difference on Webkit on using or removing `background-size` - size, spacing and color visual appearance bug to `repeating-linear-gradient`.

Comment 23

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

Attachment: testcase without background-size

Here's a testcase without the background-size. I believe Chrome's rendering of this testcase is clearly incorrect, and ours is correct.

http://dev.w3.org/csswg/css3-images/#repeating-gradients
> When rendered, however, the color-stops are repeated infinitely in both
> directions, with their positions shifted by multiples of the difference between
> the last specified color-stop's position and the first specified color-stop's
> position.

In this testcase, the stops should repeat every 3 pixels. In Chrome they clearly don't.

Comment 24

[Binyamin]

I just posted Webkit bug https://bugs.webkit.org/show_bug.cgi?id=94795 and updated demo http://jsfiddle.net/laukstein/K6XVw/2/

Comment 25

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

Thanks.

Comment 26

[Binyamin]

Just released Firefox 15 and Nightly 18.
This bug status still is not solved. Does it means that this bug and https://bugzilla.mozilla.org/show_bug.cgi?id=632324 will not be fixed on Firefox 16? If so forwarding to article https://hacks.mozilla.org/2012/07/aurora-16-is-out/, Firefox 16 release with unprefixed "repeating-linear-gradient" will bring Firefox bad experience and tons of failures.

Comment 27

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

I'm closing this bug since the testcase it was originally filed with is fixed by bug 768775. Binyamin, your bug is covered by bug 632324 as far as I can tell.

Comment 28

[Binyamin]

The issue still is not resolved. It hangs Firefox 17 and Nightly has some rendering delays too.

Comment 29

[Binyamin]

Firefox 30 has significant paint affect on repeating-linear-gradient if set background-size, background-size:auto improves performance a lot. It is still not fixed.

Comment 30

[Boris Zbarsky [:bzbarsky]]

Binyamin, did you read comment 27?