719447 - Gradients render slow and make checkerboarding happen while panning

Status: RESOLVED INVALID

(Firefox for Android Graveyard :: General, defect, P1)

Description

[William Lachance (:wlach)]

This is probably covered by other bugs, but it can't hurt to file something for this explicitly since it's a very noticeable regression from XUL fennec. 

Steps to reproduce:

1. Load taskjs.org
2. Make two swipes down

The difference between XUL and native is pretty stark on the LG G2X: XUL checkerboards for only a fraction of a second, while you see the checkerboard for a good few seconds on native.

Here's some demonstration videos:

http://people.mozilla.com/~wlachance/taskjs_xul.webm
http://people.mozilla.com/~wlachance/taskjs_native.webm

I've got an eideticker test to automatically do this. I can post updated videos as things are fixed.

Comment 1

[William Lachance (:wlach)]

(CCing folks on the eideticker thread, as well as mobile devs responsible for this stuff who might be interested)

Comment 3

[Kevin Brosnan [Ex-Mozilla]]

This is still rather ugly on a Maple tinderbox build. Though there are still a number of checkerboarding improvements that the gfx team have in the works. Leaving qawanted so that we can re-check after those land.

Comment 4

[Aaron Train [:aaronmt]]

Still able to reproduce on the recently merged Maple builds on Nightly (03/19).

--
Tested via Galaxy Nexus (Android 4.0.2)
Nightly (03/19)
Mozilla/5.0 (Android; Mobile; rv:14.0) Gecko/14.0 Firefox/14.0a1

Comment 5

[William Lachance (:wlach)]

Chris Lord mentioned on irc that it was speculated that the issue is with radial gradients on this page. I can confirm this. I was able to reduce the checkerboarding to almost nothing by changing this:

body {
  margin: 0;
  border-top: solid 2px #707070;
  padding: 80px 0;
  background-image: url("noise.png"), -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 750, color-stop(0%, #fff), color-stop(100%, #d0e0ff));
  background-image: url("noise.png"), -webkit-radial-gradient(top center, #fff, #d0e0ff 750px);
  background-image: url("noise.png"), -moz-radial-gradient(top center, #fff, #d0e0ff 750px);
  background-image: url("noise.png"), -o-radial-gradient(top center, #fff, #d0e0ff 750px);
  background-image: url("noise.png"), radial-gradient(top center, #fff, #d0e0ff 750px);
}

To this:

body {
  margin: 0;
  border-top: solid 2px #707070;
  padding: 80px 0;
  background-image: url("white.png");
}

I guess most likely this means that we're checkerboarding because radial gradients are really slow to draw. I notice almost no checkerboarding on this page on my iPhone or with the stock browser.

Comment 6

[William Lachance (:wlach)]

(of course this doesn't explain why native performs so much worse on this metric than xul fennec, when they both use ~ the same drawing code)

Comment 7

[Chris Lord [:cwiiis]]

(In reply to William Lachance (:wlach) from comment #6)
> (of course this doesn't explain why native performs so much worse on this
> metric than xul fennec, when they both use ~ the same drawing code)

I expect that the default cache viewport size in xul-fennec actually means the entire page fits into the display-port, and so you would never see checker-boarding.

Comment 9

[Kevin Brosnan [Ex-Mozilla]]

Snorp, Blassey said you are working on something about handling gradients GPU.

Comment 10

[James Willcox (:snorp) ([e-mail]) (he/him)]

(In reply to Kevin Brosnan [:kbrosnan] from comment #9)
> Snorp, Blassey said you are working on something about handling gradients
> GPU.

Definitely not me. Maybe Cwiiis? Bug 795247

Comment 11

[Chris Lord [:cwiiis]]

I'm not sure that this is even still the case now, but checkerboarding is not a huge concern anymore (because of Gecko improvements and better commodity hardware).

Comment 12

[William Lachance (:wlach)]

Yeah, I don't think this bug really has anything actionable in it anymore.