Last Comment Bug 644444 - Using Background-Size Combined With -moz-repeating-linear-gradient hangs Firefox
: Using Background-Size Combined With -moz-repeating-linear-gradient hangs Firefox
Status: RESOLVED FIXED
: hang, testcase
Product: Core
Classification: Components
Component: Layout (show other bugs)
: Trunk
: All All
: -- critical with 2 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
NB: Will hang Fx...http://www.nealgro...
Depends on: 632324 768775
Blocks:
  Show dependency treegraph
 
Reported: 2011-03-23 18:49 PDT by neal.grosskopf
Modified: 2014-07-13 17:19 PDT (History)
11 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
about:support data. (3.22 KB, text/plain)
2012-08-21 22:11 PDT, Binyamin
no flags Details
testcase without background-size (340 bytes, text/html)
2012-08-22 23:45 PDT, Robert O'Callahan (:roc) (Exited; email my personal email if necessary)
no flags Details

Description neal.grosskopf 2011-03-23 18:49:36 PDT
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] 2011-03-23 19:25:37 PDT
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 (:mats) 2011-03-23 19:28:03 PDT
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 [:kbrosnan] 2011-04-18 16:38:00 PDT
Seems like a dupe of bug 632324. I don't crash on Linux but the testcase does make Firefox sluggish.
Comment 4 Binyamin 2011-06-21 12:18:14 PDT
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 2011-06-22 22:48:16 PDT
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 2011-10-01 12:46:42 PDT
Crashes even on Firefox 7.0.1. Still not fixed since FF4+.
Comment 7 Binyamin 2011-11-08 23:32:38 PST
Crashes also FF8.
Comment 8 Kevin Brosnan [:kbrosnan] 2011-11-08 23:34:10 PST
Until this bug is fixed that is expected. No need to comment unless the behavior changes to no crashing.
Comment 9 A. Lepe 2011-12-25 18:24:18 PST
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) (Exited; email my personal email if necessary) 2011-12-27 20:01:24 PST
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 2011-12-28 17:53:43 PST
@Robert: Ok, I created a new bug: https://bugzilla.mozilla.org/show_bug.cgi?id=713992
Thanks!
Comment 12 Binyamin 2012-07-23 13:11:41 PDT
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 2012-07-23 13:58:40 PDT
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) (Exited; email my personal email if necessary) 2012-07-23 17:09:57 PDT
The patch in bug 768775 should fix this.
Comment 15 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2012-07-26 16:15:32 PDT
Fixed in bug 768775.
Comment 16 Binyamin 2012-08-21 22:11:27 PDT
@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 2012-08-21 22:11:33 PDT
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 Binyamin 2012-08-21 22:17:42 PDT
(Platform: Win8 64bit, Win7 64bit probably else Windows versions too.)
Comment 19 Robert O'Callahan (:roc) (Exited; email my personal email if necessary) 2012-08-21 23:14:32 PDT
Binyamin, do you have D2D enabled in about:support?
Comment 20 Binyamin 2012-08-22 02:01:11 PDT
(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) (Exited; email my personal email if necessary) 2012-08-22 19:51:29 PDT
Note that if you remove background-size:4px 4px from your page, it looks the same and is much faster.
Comment 22 Binyamin 2012-08-22 23:30:04 PDT
(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) (Exited; email my personal email if necessary) 2012-08-22 23:45:01 PDT
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 Binyamin 2012-08-23 03:15:02 PDT
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) (Exited; email my personal email if necessary) 2012-08-23 16:37:52 PDT
Thanks.
Comment 26 Binyamin 2012-08-29 00:42:03 PDT
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) (Exited; email my personal email if necessary) 2012-09-03 21:03:31 PDT
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 2012-11-21 05:25:27 PST
The issue still is not resolved. It hangs Firefox 17 and Nightly has some rendering delays too.
Comment 29 Binyamin 2014-07-13 14:01:05 PDT
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 [:bz] 2014-07-13 17:19:26 PDT
Binyamin, did you read comment 27?

Note You need to log in before you can comment on or make changes to this bug.