The default bug view has changed. See this FAQ.

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

RESOLVED FIXED

Status

()

Core
Layout
--
critical
RESOLVED FIXED
6 years ago
3 years ago

People

(Reporter: neal.grosskopf, Unassigned)

Tracking

({hang, testcase})

Trunk
hang, testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

6 years ago
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.
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.

Comment 4

6 years ago
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

6 years ago
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

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

Comment 7

5 years ago
Crashes also FF8.
Until this bug is fixed that is expected. No need to comment unless the behavior changes to no crashing.

Comment 9

5 years ago
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.

Comment 11

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

Comment 12

5 years ago
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

5 years ago
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
Last Resolved: 5 years ago
Resolution: --- → FIXED

Comment 16

5 years ago
@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

5 years ago
Created attachment 654096 [details]
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

5 years ago
(Platform: Win8 64bit, Win7 64bit probably else Windows versions too.)
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Binyamin, do you have D2D enabled in about:support?

Comment 20

5 years ago
(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.

Comment 22

5 years ago
(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`.
Created attachment 654532 [details]
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

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

Comment 26

5 years ago
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.

Updated

5 years ago
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
Last Resolved: 5 years ago5 years ago
Resolution: --- → FIXED

Comment 28

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

Comment 29

3 years ago
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.