1719522 - SVG clip-path rendering issue on some wide monitors

Status: VERIFIED FIXED

(Core :: SVG, defect)

Description

[Mark Root-Wiley]

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

Steps to reproduce:

I have applied a clip-path with CSS that references an on-page SVG clipPath ID.

.is-style-wave-mask-1, .is-style-wave-mask-1.wp-block-image img { -webkit-clip-path: url(#wave); clip-path: url(#wave); }

You can find the SVG image in the page source or see just the SVG markup at this link: https://cloudup.com/ihn1pBliysP

This seems to only impact people using Macs and may not always happen when viewed on an external monitor. The issue may flicker on and off when scrolling at times and isn't always immediately visible when the page loads.

This bug is currently visible on https://utopiawa.org.

Actual results:

The clip-path fails to scale, appearing to be both be constrained to a fixed width that's narrower than the element AND not "squished" to be 100% of the height.

Video: https://cloudup.com/iEcPBk_NRwi
Screenshot: https://cloudup.com/iEcPBk_NRwi

Expected results:

The clip-path should be 100% of the width and height of the element.

It should look like this: https://cloudup.com/iW3qvsyW1-6

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

This sounds quite similar to bug 1714332; possibly the same underlying issue with large coordinates somewhere?

Comment 3

[Mark Root-Wiley]

Here's a link to browser details for one person who experienced this bug: https://www.whatsmybrowser.org/b/JOHF1. Running OSX 10.15 with a 2560 x 1440 (Retina) monitor.

Comment 4

[Jonathan Kew [:jfkthame]]

I can also reproduce this on Ubuntu, with a large/high-res display. Once the element exceeds 2048px width, the clip-path gives up.

Comment 5

[Jonathan Kew [:jfkthame]]

Disabling webrender (with gfx.webrender.force-disabled:true in about:config) resolves this for me, although given that WR is going to be the standard rendering system for everyone, that's at best a temporary workaround.

Comment 6

[Jonathan Kew [:jfkthame]]

Actually, at least on my Linux machine, this appears to have been fixed by bug 1707154, which means it should be resolved in Firefox 90. Could you try Firefox Beta (90) or even Nightly (91) and see if the problem still occurs? (Although that bug refers to Wayland Linux, I think the patch there actually affects all platforms.)

Comment 7

[Jonathan Watt [:jwatt]]

Let's close this as fixed by bug 1707154. If mark retests and finds it's still an issue for him we can reopen. (Mark, version 90 is now the current version so you should be able to test without downloading a Beta/Nightly build.)

Comment 8

[Mark Root-Wiley]

@jwatt Happy to report that my client says it is resolved in Firefox 90.

Comment 9

[Jonathan Watt [:jwatt]]

Great - and thanks for taking the time to test and let us know!