Closed Bug 644444 Opened 13 years ago Closed 12 years ago

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

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Type:
defect
Priority:
Not set
Severity:
critical

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: development, Unassigned)

References

(
URL
)

Details

(Keywords: hang, testcase)

Attachments

(2 files)

about:support data.
3.22 KB, text/plain
Details
testcase without background-size
340 bytes, text/html
Details 
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.
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.
URL: http://www.nealgrosskopf.com/sites/bu... → NB: Will hang Fx...http://www.nealgro...
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: hang, testcase
Hardware: x86_64 → x86
Version: unspecified → Trunk
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!
Component: Style System (CSS) → Layout
OS: Windows 7 → All
QA Contact: style-system → layout
Hardware: x86 → All
Summary: Using Background-Size Combined With -moz-repeating-linear-gradient Crashes Firefox → Using Background-Size Combined With -moz-repeating-linear-gradient hangs Firefox
Seems like a dupe of bug 632324. I don't crash on Linux but the testcase does make Firefox sluggish.
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);
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.
Crashes even on Firefox 7.0.1. Still not fixed since FF4+.
Crashes also FF8.
Until this bug is fixed that is expected. No need to comment unless the behavior changes to no crashing.
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.
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.
@Robert: Ok, I created a new bug: https://bugzilla.mozilla.org/show_bug.cgi?id=713992
Thanks!
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.
Hopefully it will be fixed before Firefox 16 release date 2012-10-09 https://wiki.mozilla.org/RapidRelease/Calendar
The patch in bug 768775 should fix this.
Depends on: 768775
Fixed in bug 768775.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
@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).
Attached file 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.
(Platform: Win8 64bit, Win7 64bit probably else Windows versions too.)
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Binyamin, do you have D2D enabled in about:support?
(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
Note that if you remove background-size:4px 4px from your page, it looks the same and is much faster.
(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`.
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.
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.
Depends on: 632324
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.
Status: REOPENED → RESOLVED
Closed: 12 years ago → 12 years ago
Resolution: --- → FIXED
The issue still is not resolved. It hangs Firefox 17 and Nightly has some rendering delays too.
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.
Flags: needinfo?(roc)
Binyamin, did you read comment 27?
Flags: needinfo?(roc)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: