1910842 - Distortion while a checkbox animates on https://farbvelo.elastiq.ch/

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Mayank Bansal]

Go to https://farbvelo.elastiq.ch/
Click on the gear icon on the bottom
A settings pane will open.
Scroll down a bit on this pane. There will be some options with checkboxes
Click on a checkbox

AR: While the checkbox animates, there is a distortion in the rendering
ER: Not so

Bisection: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=2c8e99462d7dcbac2df0948cb9ab65d40d1d2fb7&tochange=256876c3862b6c4c8c51676f10d5ca440f86c0a8

Suspects: bug 1714763 and bug 1836693
cc :tnikkel

Comment 1

[Mayank Bansal]

Attachment: about:support

Comment 2

[Mayank Bansal]

Attachment: bandicam 2024-07-31 12-57-27-823.mp4

Comment 3

[Timothy Nikkel (:tnikkel)]

I have a cached build of https://hg.mozilla.org/mozilla-central/rev/d588d40904f7880592d27c083cb64d31864340cb that I tested that was "good", so that probably means it was my bug in that range.

Interestingly, I can reproduce on nightly, but not on beta builds. Can you reproduce on any non-nightly build? I wonder if some differences on nightly that expose this?

Comment 4

[Alice0775 White]

I can reproduce the issue on Firefox129.0rc1 Windows11.
Click on the disabled checkbox Color Bleed. then black rectangle is rendered until mouse move over color bar.

Regression window in mozilla-beta:
https://hg.mozilla.org/releases/mozilla-beta/pushloghtml?fromchange=69f421f0aa2c1c8241d09309b4950a94ba2faec7&tochange=556215a082ccfb6f6b7c35c0e263e9fe585c318c

Regression window in mozilla-central:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=e3cdd7bcd89ea80b3b400729e3a89b103e3c464c&tochange=a11e8418e383e89972a8546e6400f424b84a2ac5

Regressed by: Bug 1903546 - fix non-scaling-stroke

Comment 5

[Mayank Bansal]

Maybe there are 2 bugs here?

Comment 6

[Timothy Nikkel (:tnikkel)]

(In reply to Mayank Bansal from comment #5)

Maybe there are 2 bugs here?

That is what I am also thinking might be happening here.

Comment 7

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

Set release status flags based on info from the regressing bug 1903546

:longsonr, since you are the author of the regressor, bug 1903546, could you take a look?

For more information, please visit BugBot documentation.

Comment 8

[Robert Longson [:longsonr]]

As far as I can tell Firefox ESR 115 exhibits this behaviour. Can you confirm Alice?

bug 1903546 is designed to revert to that as far as possible so that's what I'd expect. The behaviour of non-scaling-stroke between ESR115 and bug 1903546 was somewhat broken.

What you're seeing here is actually bug 1734476.

Comment 9

[Robert Longson [:longsonr]]

actually mozregression shows Firefox 115 is OK.

Comment 10

[Alice0775 White]

The first regression was caused by Bug 1714763 and Bug 1836693. It was then fixed by Bug 1898409.
However, a second regression was again caused by Bug 1903546.

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

actually mozregression shows Firefox 115 is OK.

Yes, Firefox 115 is OK, works fine for me.

Comment 11

[Timothy Nikkel (:tnikkel)]

(In reply to Alice0775 White from comment #10)

The first regression was caused by Bug 1714763 and Bug 1836693. It was then fixed by Bug 1898409.
However, a second regression was again caused by Bug 1903546.

So sounds like the root cause is probably bug 1714763 then?

Comment 12

[Robert Longson [:longsonr]]

No, it's bug 1903546 https://treeherder.mozilla.org/jobs?repo=try&revision=89ea46179928929d4f25d55f9e29d07a98f75440

Comment 13

[Robert Longson [:longsonr]]

Attachment: Bug 1910842 - fix non-scaling-stroke when outer svg element has a CSS transform r=emilio

Comment 14

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=2cc7de89893378d391d4d6240fcd1c8977592cdd

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/daa273f24110
fix non-scaling-stroke when outer svg element has a CSS transform r=emilio

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/47433 for changes under testing/web-platform/tests

Comment 17

[Norisz Fay [:noriszfay]]

Backed out for causing dt failures on browser_inspector_highlighter-cssshape_offset-path.js

Backout link

Push with failures

Failure log

Comment 18

[Mayank Bansal]

Can confirm that the autoland build fixes this bug for me.

Comment 19

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 20

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

Set release status flags based on info from the regressing bug 1903546

Comment 21

[Daniel Holbert [:dholbert]]

Tentatively triaging as S2 given this is a recent regression that we shouldn't lose track of (particularly given that we've got a patch that was just backed out for regressing one automated test; hopefully it's not too hairy to untangle that).

Comment 22

[Robert Longson [:longsonr]]

Unfortunately the patch doesn't make us compatible with Chrome.

1. Chrome (and Firefox without this patch) takes the outer svg viewBox into account with non-scaling-stroke. The current patch would exclude it.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-20 -20 50 50" width="100%" height="100%">
<rect width="10" height="10" stroke="lime" stroke-width="10" vector-effect="non-scaling-stroke" />
</svg>

The above SVG displays the same in Chrome and Firefox currently but would display all lime with the current patch.

What Chrome seems to do is ignore any transform on the outer SVG element.

Comment 23

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=b859a80a1bdad23726d34473439ee9c533b3cf68

Comment 24

[Robert Longson [:longsonr]]

Looks like that makes the existing test pass too.

Comment 25

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d568d18c7971
fix non-scaling-stroke when outer svg element has a CSS transform r=emilio

Comment 26

[Iulian Moraru]

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

Comment 27

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 28

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

The patch landed in nightly and beta is affected.
:longsonr, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox130 to wontfix.

For more information, please visit BugBot documentation.

Comment 29

[Ryan VanderMeulen [:RyanVM]]

I'm a bit confused about this being set to wontfix for 130 given it being rated S2 severity and tracking+ for Fx130. Is it your opinion that this bug isn't as severe as originally thought to be?

Comment 30

[Daniel Holbert [:dholbert]]

I may've been off slightly by rating it S2; mostly wanted to be sure it didn't fall off the radar, since it was a regression with a nearly-landable patch.

Given that this bug was cosmetic (not site breaking), and we shipped the bug already in 129, and automated test coverage is somewhat lacking for non-scaling-stroke edge cases (meaning there's nonzero risk of regressions): I think wontfix for beta130 is the right call.

Comment 31

[Robert Longson [:longsonr]]

We've not had any duplicates as far as I can tell. You need a non-scaling-stroke on a shape where there is an outer <svg> element that has a transform so it's not going to be that common. Until recently neither Chrome nor Safari supported transforms on <svg> elements so that's why such content is pretty rare.