Closed Bug 1720986 Opened 3 years ago Closed 3 years ago

Firefox 90 breaks display of SVG objects

Categories

(Core :: Graphics: WebRender, defect)

Firefox 90
defect

Tracking

()

VERIFIED FIXED
92 Branch
Tracking Status
firefox-esr78 --- unaffected
firefox90 --- wontfix
firefox91 --- verified
firefox92 --- verified

People

(Reporter: salvatore, Assigned: mattwoodrow)

References

(Regression)

Details

(Keywords: regression)

Attachments

(4 files)

Attached image 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;

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

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

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

The last bad commit is highlighted.

Has Regression Range: --- → yes
Regressed by: 1548056
Status: UNCONFIRMED → NEW
Has STR: --- → yes
Ever confirmed: true

If you disable WebRender, this problem will disappear.

Component: SVG → Graphics: WebRender
Flags: needinfo?(matt.woodrow)
Severity: -- → S2
Assignee: nobody → matt.woodrow
Status: NEW → ASSIGNED
Flags: needinfo?(matt.woodrow)
Pushed by mwoodrow@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/bde3abc2dfe9 Reinstate clipping filters within SVG to the building rect. r=jrmuizel
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → 92 Branch

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

Flags: needinfo?(matt.woodrow)

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!

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.

Flags: needinfo?(matt.woodrow)

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:
Attachment #9232769 - Flags: approval-mozilla-beta?

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

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

Approved for 91 beta 8, thanks.

Attachment #9232769 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
QA Whiteboard: [qa-triaged]

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Regressions: 1760747
Regressions: 1845856
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: