1720986 - Firefox 90 breaks display of SVG objects

Status: VERIFIED FIXED

(Core :: Graphics: WebRender, defect)

Description

[salvatore]

Attachment: SVG overlay

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15

Steps to reproduce:

The following minimal code results in the SVG not displaying. This used to work in Firefox 89, and still works in the latest Chrome:

<style>
img, object {
position: absolute;
top: 0;
left: 0;
width: 300px;
}

object {
z-index: 1;
}
</style>

<img src="https://cdn.astrobin.com/thumbs/jbZsQUF0B1qc_1824x0_n1wMX-gx.jpg">
<object type="image/svg+xml" data="https://cdn.astrobin.com/pixinsight-solutions-regular/GC2D5KMJ66Y2VVQFSGD9PUD1GNCHCRHO.svg"></object>

This is available in this JSFiddle:

https://jsfiddle.net/df1c7jut/

Actual results:

The SVG overlay is not visible on top of the image.

Expected results:

The SVG overlay, with the coordinate grid and the circles and labels near the detected galaxies, is not visible. It should look like the attached screenshot;

Comment 1

[salvatore]

Attachment: Minimal reproduction (1 HTML file, 1 JPG file, 1 SVG file)

This file contains a minimal reproduction path that can be loaded locally.

Comment 2

[salvatore]

This is the result of the bisect via mozregression:

2021-07-17T11:38:09.646000: DEBUG : Found commit message:
Bug 1548056 - Use nsDisplayItem::Paint and DLBI to paint fallback filters instead of FrameLayerBuilder. r=jrmuizel

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

2021-07-17T11:38:09.646000: DEBUG : Did not find a branch, checking all integration branches
2021-07-17T11:38:09.648000: INFO : The bisection is done.
2021-07-17T11:38:09.649000: INFO : Stopped

Comment 3

[salvatore]

Attachment: mozregression screenshot

This file is a screenshot of mozregression, with the panes scrolled all the way down to the end.

The last bad commit is highlighted.

Comment 4

[Alice0775 White]

If you disable WebRender, this problem will disappear.

Comment 5

[Matt Woodrow (:mattwoodrow)]

Attachment: Bug 1720986 - Reinstate clipping filters within SVG to the building rect. r?jrmuizel

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bde3abc2dfe9
Reinstate clipping filters within SVG to the building rect. r=jrmuizel

Comment 7

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/bde3abc2dfe9

Comment 8

[Pascal Chevrel:pascalc (PTO until April 26)]

Is that a fix we should have in 91 or would it be safer to let it ship in 92? Thanks

Comment 9

[salvatore]

Thanks for addressing this so quickly! Quick question, if you don't mind: is there anything I can do as a workaround to make it work on Firefox 90 for now?

For instance, as the reported scenario doesn't work as-is in Safari, I do the following:

var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
   navigator.userAgent &&
    navigator.userAgent.indexOf('CriOS') === -1 &&
    navigator.userAgent.indexOf('FxiOS') === -1;

if (isSafari) {
  var contentDocument = document.getElementById("advanced-plate-solution-svg").contentDocument;
  contentDocument.querySelector("svg > g").removeAttribute("filter");
}

This drops the shadows, in my case. Could I do something similar to Firefox to make it work there for now?

Thanks!

Comment 10

[Matt Woodrow (:mattwoodrow)]

I would assume the same fix would help for Firefox 90?

The specific issue here is that we're applying a 'complex' filter to an object with enormous bounds (the 3rd 'g' element is 3112990x1935910 pixels), and we were failing to restrict that to the subset that's actually visible.

So anything that removes the filter or reduces/clips the size of the 3rd g element should work.

Comment 11

[Matt Woodrow (:mattwoodrow)]

Comment on attachment 9232769 [details]
Bug 1720986 - Reinstate clipping filters within SVG to the building rect. r?jrmuizel

Beta/Release Uplift Approval Request

• User impact if declined: Failed rendering of SVG filters in rare cases.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Pretty low risk, just changes the clipping rectangle we draw SVG filters with.
• String changes made/needed:

Comment 12

[salvatore]

Thanks Matt, the code above also works for Firefox 90 to workaround the bug.

Comment 13

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9232769 [details]
Bug 1720986 - Reinstate clipping filters within SVG to the building rect. r?jrmuizel

Approved for 91 beta 8, thanks.

Comment 14

[Pascal Chevrel:pascalc (PTO until April 26)]

https://hg.mozilla.org/releases/mozilla-beta/rev/3ed2819c666d

Comment 15

[Giorgia Nichita, Release Desktop QA]

I have reproduced the issue using an affected Nightly 92.0a1 (20210717093616) on Windows 10x64.
Verified fixed with Firefox 91.0b8 (20210727185725) and 92.0a1 (20210728215815) on Windows 10x64, macOS 10.15 and Ubuntu 20.04.