Closed Bug 1922222 Opened 1 year ago Closed 1 year ago

SVG invisible if scale on hover

Categories

(Core :: SVG, defect)

Product:
Core
Component:
SVG
Version:
Firefox 132
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
133 Branch
Tracking Flags:
Tracking Status
firefox-esr128 --- unaffected
firefox131 --- wontfix
firefox132 --- verified
firefox133 --- verified

People

(Reporter: k.fatz, Assigned: emilio)

References

(Regression)

Details

(Keywords: regression)

Attachments

(2 files, 11 obsolete files)

More reduced test-case
530 bytes, text/html
Details
Bug 1922222 - Move outer <svg> border/padding transform tweak. r=longsonr!,jwatt!
48 bytes, text/x-phabricator-request
RyanVM
: approval-mozilla-beta+
RyanVM
: approval-mozilla-release-
Details | Review

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

Steps to reproduce:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Test</title>
<style>
.aktiv_icon20 {
vertical-align: -0.2em;
width: 16px;
text-align: center;
padding: 5px 5px 5px;
margin-right: 4px;
font-size: 16px;
color: #2E2E2E;
border: 1px solid #C0C0C0;
}

    svg.calculate {
        background: rgb(90, 90, 173, .15);
        color: #000;
    }

    svg:hover {
        transform: scale(1.2); /* Zoomstufe */
        transition: transform 0.2s; /* Füge eine sanfte Übergangsanimation hinzu */
    }

</style>

</head>
<body>
<a class="tooltip" title='Eintrag ändern' href="aendern.php?ID=466">
<svg class='aktiv_icon20 calculate' viewBox='0 0 1 1'>
<use href='./icons.svg#calculate'></use>
</svg>
</a>
</body>
</html>

Actual results:

On hover the svg gets invisible

Expected results:

it should scale

Attached file reporter's testcase (obsolete) —

Same here, I don't see any issue on macOS.

Do you see the problem on a clean profile?
https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles#w_starting-the-profile-manager

Flags: needinfo?(k.fatz)
Attached file a.html (obsolete) —
Attached image icons.svg (obsolete) —
Attached image mozilla.gif (obsolete) —

(In reply to Francesco Lodolo [:flod] from comment #7)

There is an Attach New File button above your first comment.

Thanks, I've uploaded 3 files:

  1. html
  2. icons.svg
  3. The output in my FF

btw., in FF < 131.0 it was working like a charm

If that's the case, you could try to run mozregression: https://mozilla.github.io/mozregression/quickstart.html

With that said, the SVG file remains blank for me (even the version you attached). Tried in Firefox, Chrome, and an external editor.

Can you double check the SVG (try opening it in the browser)? What's supposed to show?

Flags: needinfo?(k.fatz)
Attached file a.html (obsolete) —

This file generates 2 SVG.
One will be unvisible after mouseover, the over one stays visible.

Flags: needinfo?(k.fatz)

Look at the new a.html file.

Changing viewBox='0 0 1 1' into width='16' height='16' generates 2 SVG.
One will be unvisible after mouseover, the over one stays visible.

Attachment #9428757 - Attachment is patch: false

I still don't see an image, only 2 empty squares. Tentatively moving to the SVG component, at least they will know more.

Component: Untriaged → SVG
Product: Firefox → Core
Attached video mozilla2.mp4 (obsolete) —

(In reply to Francesco Lodolo [:flod] from comment #17)

I still don't see an image, only 2 empty squares. Tentatively moving to the SVG component, at least they will know more.

Look at video-file mozilla2.mp4

Attachment #9428804 - Attachment mime type: text/plain → text/html
Attached file reporter's testcase (obsolete) —
Attachment #9428804 - Attachment is obsolete: true
Attachment #9428806 - Attachment mime type: text/plain → text/html

Attached file reporter's testcase — Details

Thanks.

Mozregression points to bug 1915206, somehow.

Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: regression
Regressed by: 1915206
Flags: needinfo?(emilio)

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

status-firefox131: --- → affected
status-firefox132: --- → affected
status-firefox133: --- → affected
status-firefox-esr128: --- → unaffected
Attached file Reduced test-case. (obsolete) —
Attached file More reduced test-case —

Something about the padding and the outer svg transform getting confused... If I remove the padding then it works, which is probably why we haven't seen this earlier.

Something around here and related code-paths?

Attachment #9428647 - Attachment is obsolete: true
Attachment #9428648 - Attachment is obsolete: true
Attachment #9428765 - Attachment is obsolete: true
Attachment #9428806 - Attachment is obsolete: true
Attachment #9430769 - Attachment is obsolete: true
Blocks: 1924375

I think this was needed before bug 1924375 because it was applied as a
regular transform (not child-only transform) and thus was affected by
transform-origin and so on (which was not reset to 0 0 on the anon
frame). So this was basically undoing the effect of transform-origin I
believe.

Thus the right thing to do is:

  • Not trying to to undo the translation in SVGOuterSVGFrame.
  • Avoid doing it in the display list to begin with. This is what
    papered the issue without viewbox to begin with, the math just
    happened to add up when no scale was present.

This gets the right behavior and is less hacky. I think I convinced
myself this is the right thing to do, but it'd be nice to get another
pair of eyes.

Assignee: nobody → emilio
Status: NEW → ASSIGNED
Flags: needinfo?(emilio)
Duplicate of this bug: 1924375
Pushed by jwatt@jwatt.org: https://hg.mozilla.org/integration/autoland/rev/af913157ed4e Move outer <svg> border/padding transform tweak. r=longsonr,jwatt
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/48644 for changes under testing/web-platform/tests

Comment on attachment 9430829 [details]
Bug 1922222 - Move outer <svg> border/padding transform tweak. r=longsonr!,jwatt!

Beta/Release Uplift Approval Request

  • User impact if declined/Reason for urgency: Recent regression
  • Is this code covered by automated tests?: Yes
  • Has the fix been verified in Nightly?: Yes
  • Needs manual test from QE?: Yes
  • If yes, steps to reproduce: comment 0, and duplicate
  • List of other uplifts needed: none
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Relatively simple change.
  • String changes made/needed: none
  • Is Android affected?: Yes
Attachment #9430829 - Flags: approval-mozilla-release?
Attachment #9430829 - Flags: approval-mozilla-beta?
Flags: qe-verify+

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

Status: ASSIGNED → RESOLVED
Closed: 1 year ago
status-firefox133: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → 133 Branch
Flags: in-testsuite+
Attachment #9430829 - Flags: approval-mozilla-release? → approval-mozilla-release-

Comment on attachment 9430829 [details]
Bug 1922222 - Move outer <svg> border/padding transform tweak. r=longsonr!,jwatt!

Approved for 132.0b9.

Attachment #9430829 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
QA Whiteboard: [qa-triaged]
Upstream PR merged by moz-wptsync-bot

Reproduced the issue with Firefox 133.0a1 (2024-10-02) on Windows 10x64 using the test case from comment 28 and the link from bug 1924375 (https://www.obsessivefacts.com/facts/true/undefined). The SVG image disappears from the test case and the background is not displayed on the webpage.
The issue is verified fixed with Firefox 133.0a1 (2024-10-16) and 132.0b9 from comment 37 on Windows 10x64, macOS 12 and Ubuntu 24.04 by using the test case from comment 28 and the link from bug 1924375 (https://www.obsessivefacts.com/facts/true/undefined). The SVGs are displayed as expected.

Status: RESOLVED → VERIFIED
QA Whiteboard: [qa-triaged]
status-firefox132: fixed → verified
status-firefox133: fixed → verified
Flags: qe-verify+
No longer blocks: 1924375
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: