Open Bug 1603899 Opened 2 years ago Updated 7 months ago

SVG image with gaussianBlur flickering around the edges

Categories

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

71 Branch
defect

Tracking

()

REOPENED
Tracking Status
firefox-esr68 --- unaffected
firefox75 --- wontfix
firefox76 --- wontfix
firefox77 --- wontfix
firefox78 --- fixed

People

(Reporter: cryptodescriptor, Unassigned)

References

(Blocks 1 open bug, Regression)

Details

(Keywords: correctness, regression)

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

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

Flags: needinfo?(cryptodescriptor)

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

Component: Untriaged → SVG
Product: Firefox → Core

(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

Flags: needinfo?(cryptodescriptor)
Component: SVG → Graphics: WebRender
Regressed by: 1568227

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

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?

Priority: -- → P3

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

Flags: needinfo?(a.beingessner)
Blocks: wr-wild
No longer blocks: wr-72

Any update on this?

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.

Flags: needinfo?(a.beingessner) → needinfo?(jbonisteel)
Blocks: gfx-triage
Flags: needinfo?(jbonisteel)

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

Flags: needinfo?(nical.bugzilla)
No longer blocks: gfx-triage

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.

Status: UNCONFIRMED → NEW
Ever confirmed: true

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.

Flags: needinfo?(nical.bugzilla)

Appears fixed in the nightly build as Nicolas Silva mentioned.

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

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

Status: NEW → RESOLVED
Closed: 1 year ago
Keywords: correctness
OS: Unspecified → All
Hardware: Unspecified → All
Resolution: --- → DUPLICATE
Duplicate of bug: 1555356

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

Status: RESOLVED → REOPENED
Resolution: DUPLICATE → ---
You need to log in before you can comment on or make changes to this bug.