SVG invisible if scale on hover
Categories
(Core :: SVG, defect)
Tracking
()
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)
530 bytes,
text/html
|
Details | |
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
Comment 1•1 month ago
|
||
Comment hidden (obsolete) |
Comment 3•1 month ago
|
||
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
Comment hidden (off-topic) |
Comment hidden (off-topic) |
Comment hidden (off-topic) |
Comment hidden (off-topic) |
Reporter | ||
Comment 10•1 month ago
|
||
Reporter | ||
Comment 11•1 month ago
|
||
(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:
- html
- icons.svg
- The output in my FF
Reporter | ||
Comment 12•1 month ago
|
||
btw., in FF < 131.0 it was working like a charm
Comment 13•1 month ago
|
||
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.
Comment 14•1 month ago
|
||
Can you double check the SVG (try opening it in the browser)? What's supposed to show?
Reporter | ||
Comment 15•1 month ago
|
||
This file generates 2 SVG.
One will be unvisible after mouseover, the over one stays visible.
Reporter | ||
Comment 16•1 month ago
|
||
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.
Updated•1 month ago
|
Comment 17•1 month ago
|
||
I still don't see an image, only 2 empty squares. Tentatively moving to the SVG component, at least they will know more.
Reporter | ||
Comment 18•1 month ago
|
||
Reporter | ||
Comment 19•1 month ago
|
||
(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
Comment hidden (obsolete) |
Comment hidden (obsolete) |
Comment hidden (obsolete) |
Updated•1 month ago
|
Comment 23•1 month ago
|
||
Updated•1 month ago
|
Reporter | ||
Comment 24•1 month ago
|
||
Attached file reporter's testcase — Details
Thanks.
Assignee | ||
Comment 25•1 month ago
|
||
Mozregression points to bug 1915206, somehow.
Assignee | ||
Updated•1 month ago
|
Comment 26•1 month ago
|
||
Set release status flags based on info from the regressing bug 1915206
Updated•28 days ago
|
Assignee | ||
Comment 27•28 days ago
|
||
Assignee | ||
Comment 28•28 days ago
|
||
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?
Assignee | ||
Comment 29•28 days ago
|
||
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.
Updated•28 days ago
|
Assignee | ||
Updated•28 days ago
|
Assignee | ||
Comment 31•28 days ago
|
||
Comment 32•26 days ago
|
||
Assignee | ||
Comment 34•26 days ago
|
||
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
Assignee | ||
Updated•26 days ago
|
Comment 35•25 days ago
|
||
bugherder |
Updated•25 days ago
|
Updated•25 days ago
|
Comment 36•25 days ago
|
||
Comment on attachment 9430829 [details]
Bug 1922222 - Move outer <svg> border/padding transform tweak. r=longsonr!,jwatt!
Approved for 132.0b9.
Updated•25 days ago
|
Comment 37•25 days ago
|
||
uplift |
Updated•25 days ago
|
Comment 39•25 days ago
•
|
||
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.
Description
•