1603899 - SVG image with gaussianBlur flickering around the edges

Status: REOPENED

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

Description

[cryptodescriptor]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

codepen: https://codepen.io/cryptodescriptor/full/QWLrKMx
github: https://cryptodescriptor.github.io/survey-form/

github repository: https://github.com/cryptodescriptor/survey-form

Frosted Panel (this controls the SVG inside the panel): https://cryptodescriptor.github.io/frosted-panel/

When using Firefox 71.0 the SVG inside the panel div flickers when the page is loaded, when the page is scrolled, and also sometimes when the browser is resized. Interestingly it seems to be reset when the select dropdown transition is triggered when hovered over.

This was working flawlessly a few build ago. I'm not exactly sure which version, but it seems to be very recently when it stopped working. I read that firefox made changes to their rendering engine in a recent update, do you think this might be the cause?

Actual results:

What it looks like when flickering: https://i.stack.imgur.com/4wgML.png

Expected results:

How its supposed to look: https://i.stack.imgur.com/dypuZ.png

Comment 1

[Robert Longson [:longsonr]]

If you think this used to work regently, could you use moz-regression to determine exactly when things changed please?

Comment 2

[Release mgmt bot [:sylvestre / :calixte / :marco for bugbug]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[cryptodescriptor]

(In reply to Robert Longson [:longsonr] from comment #1)

If you think this used to work regently, could you use moz-regression to determine exactly when things changed please?

I used regression on both Windows 10 and Ubuntu VM's, and I ultimately was unable to reproduce the flickering issue. But when I tested using regression on my host machine running Windows 10 I seem to have pinpointed the bad builds:

2019-12-14T08:27:55: INFO : Narrowed inbound regression window from [4f254e8f, b3dd0e50] (3 builds) to [4f254e8f, 7fa90877] (2 builds) (~1 steps left)
2019-12-14T08:27:55: DEBUG : Starting merge handling...
2019-12-14T08:27:55: DEBUG : Using url: https://hg.mozilla.org/integration/autoland/json-pushes?changeset=7fa90877a45bd1b70b0d49fad6f4cb9718c3b7b7&full=1
2019-12-14T08:27:56: DEBUG : Found commit message:
Bug 1568227. Change to using the visual rect for the blob bounds. r=nical

This also makes sure that we invalidate for any visible rect bounds changes.
This makes more sense even if it's more conservative.

Differential Revision: https://phabricator.services.mozilla.com/D45325

2019-12-14T08:27:56: DEBUG : Did not find a branch, checking all integration branches
2019-12-14T08:27:56: INFO : The bisection is done.
2019-12-14T08:27:56: INFO : Stopped

Comment 4

[Robert Longson [:longsonr]]

Filters can overflow the element bounds perhaps webrender is not accounting for that properly.

Comment 5

[Jamie Nicol [:jnicol]]

I can reproduce this on Linux and Mac with webrender enabled too (only when resizing, not when scrolling for me). Jeff, any thoughts on why that change might have caused this?

Comment 6

[Jessie [:jbonisteel] pls NI]

Alexis, can you look you add this bug to your list?

Comment 7

[cryptodescriptor]

Any update on this?

Comment 8

[cryptodescriptor]

I noticed it only happens when scrolling if my mouse is hovering over the div. Another thing I also noticed, is that when the bug occurs I can fix it temporarily by hovering over any element in inspect element.

Comment 9

[Jessie [:jbonisteel] pls NI]

Hey Nical - can you take a look? Seems like it can be repro-ed when clicking through the form fields and dropdown

Comment 10

[Clara Guerrero]

Hi,

Thanks for the details. I was able to reproduce on windows 10 pro on the following versions

Firefox Nightly version 78.0a1 (2020-05-06) (64-bit)
Beta 77.0b2 (64-bit)
Release 76.0 (64-bit)

I am updating flags accordingly.

Thanks for the report.

Best regards, Clara.

Comment 11

[Nicolas Silva [:nical]]

I was able to reproduce this a couple of weeks ago but not anymore. It appears that we aren't rendering blobs in this testcase anymore so it might be that recent SVG filter improvements put this off the blob fallback path.

Comment 12

[cryptodescriptor]

Appears fixed in the nightly build as Nicolas Silva mentioned.

Comment 13

[Clara Guerrero]

Hi,

I've tested this using the following versions: (for windows 10 pro)

Release 76.0 (64-bit) (bug still happens)
Beta 77.0b8 (64-bit) (I cannot reproduce anymore)
Firefox Nightly 78.0a1 (2020-05-21) (64-bit) (I cannot reproduce anymore)

Best,
Clara

Comment 14

[Darkspirit]

mozregression --find-fix --bad 76 --good 2020-05-28 --pref gfx.webrender.all:true -a https://codepen.io/cryptodescriptor/full/QWLrKMx

12:20.41 INFO: First good revision: a86dcd6715c9e52fdd8e4a937b5e94ea2b9a5fcb
12:20.41 INFO: Last bad revision: e27a62f854b29efd5719040bb53227b65c3e954a
12:20.41 INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=e27a62f854b29efd5719040bb53227b65c3e954a&tochange=a86dcd6715c9e52fdd8e4a937b5e94ea2b9a5fcb

a86dcd6715c9e52fdd8e4a937b5e94ea2b9a5fcb Bert Peers — Bug 1555356 - Make images inside of SVGs active. r=aosmond

Comment 15

[Robert Longson [:longsonr]]

Unfortunately I've disabled the code in bug 1555356 as part of bug 1684625

Comment 16

[cryptodescriptor]

Hey, is this broken again? https://cryptodescriptor.github.io/survey-form/