1905023 - SVG not zoomed correctly with css zoom property

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[nezriffic]

Attachment: CSS_ZOOM_FIREFOX_SVG_ISSUE.png

Steps to reproduce:

When using css zoom property, SVGs are not zoomed/scaled correctly.
(SVG tag itself is zoomed - gets correct dimensions - while its contents like paths, shapes etc. are not)

Code that shows what is wrong:
https://codepen.io/nezriffic/pen/eYaorgo

Firefox version: 127.0.2

Actual results:

SVG contents (inside the <svg> tag) are not zoomed correctly (SVG breaks)

Expected results:

Whole SVG should be zoomed/scaled correctly.

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 correct in case you think the bot is wrong.

Comment 3

[nezriffic]

Just a note, the one that this ticket "duplicates from" describes <path> while there may be more tags affected (eg. <circle> is too).

Comment 4

[nezriffic]

Unfortunately, the "Depends on" ticket (https://bugzilla.mozilla.org/show_bug.cgi?id=1903361) did not fix the problem.
It changed the behavior a bit but did not fix it.

Circle with path:
https://codepen.io/nezriffic/pen/eYaorgo
(screenshot: https://www.evernote.com/shard/s402/sh/1c2bf211-56cb-41ad-8944-9578062ec31d/N5897QR3lBeiRKaw4Vzw39XyRqO0h1ImflSsfx6WLwmlhWzXA9879oqwSA)

Circle only:
https://codepen.io/nezriffic/pen/Rwmmwzr
(screenshot: https://www.evernote.com/shard/s402/sh/d9912c36-ea88-4a28-9d34-a741fd23dacb/sCdEe7woH6nqht1eJfCgYiofjOxaRnb7eg-AuU-pnMNOFS4VpiPMC77KoA)

Comment 5

[nezriffic]

Circle only screenshot (previous link is broken for some reason):
https://www.evernote.com/shard/s402/sh/d9912c36-ea88-4a28-9d34-a741fd23dacb/k1BpTz6CaFSR6S3KtmPGXB7FADlb6dqWURs3gIO9R4GI-wWAFL_05W4UNw

Comment 6

[Robert Longson [:longsonr]]

Attachment: straw man

This seems to fix the rendering but it's clearly wrong. I'm dividing by the zoom so somewhere else we're applying a zoom when we shouldn't but I'm not sure where.

Comment 7

[Robert Longson [:longsonr]]

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

Comment 8

[Robert Longson [:longsonr]]

Attachment: Bug 1905023 - viewBox values need to be adjusted in the presence of CSS zoom r=emilio

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2fbabd45d745
viewBox values need to be adjusted in the presence of CSS zoom r=emilio

Comment 10

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

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

Comment 11

[tszentpeteri]

https://hg.mozilla.org/mozilla-central/rev/2fbabd45d745

Comment 12

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

Upstream PR merged by moz-wptsync-bot

Comment 13

[nezriffic]

Hey Team!
We are getting closer

I checked with Firefox Nightly 129.0a1 (2024-07-03)

Take a look at examples (updated), please:
https://codepen.io/nezriffic/pen/Rwmmwzr

#1. Filled circle: renders perfectly fine

#2. Stroke circle + path: renders wrong

#3. Stroke circle + rect: renders wrong

#4. "Bell": renders wrong (NOTE: it renders fine in stable Firefox 127.0.2)

https://www.evernote.com/shard/s402/sh/4e2f2142-1450-423e-a3db-ae224ddb80fb/kkP6J2BKWumf26_N91zRU_hkDgcg1HD9tJJcs8lPLK3h8oeQVSdxbq4V-g

Comment 14

[Emilio Cobos Álvarez [:emilio]]

Let's track that in bug 1906261.