1613595 - Incorrect background/gradient rendering on MDN

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect, P3)

Description

[Gaurav]

Attachment: Screen Recording.m4v

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

Background for all table cells indicating "No support" in Browser Compatibility table on MDN is rendered incorrectly with WebRender on Fenix. Disabling Webrender solves it. Fennac renders it correctly.

Device: Xiaomi Redmi Note 3
OS: Android Pie (Havoc OS 2.5)
Fenix: Nightly 200206 06:01 (Build #20370605)

STR:

1. Open any MDN page with compatibility table (https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
2. Scroll to Browser compatibility table

Actual results:

Cell background is incorrect & flickers when scrolling.

Comment 1

[Gaurav]

Attachment: about:support

Comment 2

[Nicolas Silva [:nical]]

Works well on desktop (when sizing the window so that the table is laid out like in the mobile version). Jamie does this ring any bell?

Comment 3

[Jamie Nicol [:jnicol]]

Hmm, I can't reproduce on my Pixel 2 (Adreno 540) nor OnePlus 6 (Adreno 630). Reported device is an Adreno 510, maybe it's a gradient bug specific to that GPU.

The fact it flickers is very odd though, I would have thought picture caching would mean once the tile is rendered it doesn't change when scrolling.

Comment 4

[Jamie Nicol [:jnicol]]

Guarav, thanks for the report! Could you go to about:config and enable gfx.webrender.debug.picture-caching, and take another video of the bug? Thanks!

Comment 5

[Gaurav]

Attachment: Recording with gfx.webrender.debug.picture-caching = true

Comment 6

[Jamie Nicol [:jnicol]]

Thank you, that's very helpful. It seems like something on that page is causing invalidations every frame, meaning the gradients are rendered very frequently rather than only once. That's not the real bug here though, it just makes it worse. FWIW I see something similar on my phone in terms of the picture cache debugging, but in my case the gradients are rendered correctly.

One last thing you could try, you could use mozregression to try to find out whether this was regressed by a recent firefox change. It is possible that it's always been the case, so this won't work, but it's worth a shot.

Have you ever used it before? If not, I'm happy to help guide you through it. If you know what you're doing, the command to use would be: mozregression --app gve --repo central --pref "gfx.webrender.all:true" --good 2019-06-01 (the pref flag ensure webrender is enabled even for old builds, and there's not point starting before june 2019 because the app just crashes on startup :/ )

Comment 7

[Gaurav]

I was trying different flags and gfx.webrender.picture-caching = false gives slightly different result (gradient is drawn correctly in-between). Maybe this gives you any clue.

I know about mozregression but haven't used it before. I will try it and let you know if I face any issue.
Thanks.

Comment 8

[Gaurav]

Attachment: Recording with gfx.webrender.picture-caching = false

Comment 9

[Gaurav]

mozregression results:

As you predicted, all builds renders the gradient incorrectly. But older builds render it "more correctly" i.e. all cells are similar (see attached image) and when scrolling gradient sometimes flickers between correct/incorrect.

New builds renders it really zig-zaggy. So I tried to bisect by treating older builds as "good" and mozregression pointed to following pushlog:

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=3d2b14d80fb3ba4e8064e105a817ffcec21f7adc&tochange=1bcbb2e808a7ff611a33bc336bc3f2a8a514f2f8

Comment 10

[Gaurav]

Attachment: Screenshot GeckoView_Example (Older builds)

Comment 11

[Jamie Nicol [:jnicol]]

Thanks for finding that, that's interesting. I'm not sure what exactly this tells us, if anything, but it's certainly our best lead!

Comment 12

[Nicolas Silva [:nical]]

Added to the driver issues list.
This is going to be a tough one to debug without getting our hands on a device that has the issue.

Comment 13

[Gaurav]

I have a simple test case which is rendered correctly until the changes mentioned in comment 9 . Newer builds only render the first color of gradient. I don't know if its the same issue. Should I open a new bug?

Test case: <button style="background-image: linear-gradient(green, red); padding: 100px; margin: 100px;">Hello</button>

Comment 14

[Jamie Nicol [:jnicol]]

It's probably the same bug, so no need to open another one. A screenshot of how that renders would be useful, thanks!

Comment 15

[Gaurav]

Attachment: Webrender enabled (Left) <---> Webrender disabled (Right)

Comment 16

[Gaurav]

With WebRender enabled, if I zoom in/out quickly, I can sometimes see hints/parts of gradient for a split second.

Comment 17

[Gaurav]

This seems to have been fixed in latest nightly (It might have been fixed earlier but I just noticed it).
Thanks for all the work you guys are doing.

Comment 18

[Glenn Watson [:gw]]

Fixed per reporter's comment.