css.properties.zoom - Complex SVG elemets are distorted

[TMarciDev]

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

Firefox does not support more complex SVG elements.

What browsers does this problem apply to, if applicable?

Firefox

What did you expect to see?

SVG elements that have transform translate that can be scaled properly via zoom style tag on the body.

Did you test this? If so, how?

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Main face circle -->
  <circle cx="100" cy="100" r="50" fill="red" transform="translate(0, 0)" />

  <!-- Left ear -->
  <circle cx="60" cy="60" r="30" fill="red" transform="translate(-30, -40)" />

  <!-- Right ear -->
  <circle cx="140" cy="60" r="30" fill="red" transform="translate(30, -40)" />
</svg>

body {
    zoom: 50%;
}

At zoom: 100%:

At zoom: 50%:

As you can see the same svg looks different. While chrome keeps the ratio, firefox does not.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

MDN metadata

MDN page report details

• Query: css.properties.zoom
• Report started: 2024-09-27T08:29:52.193Z

[evilpie]

I can't reproduce this issue. Can you please report this bug including a complete test case at https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=SVG instead?

[caugner]

With this MDN Playground, I can reproduce the issue via BrowserStack Live in Firefox 129 and 130, but not in Firefox 131.

Looking at transform issues fixed in Firefox 131, bug 878346 may have fixed this. The patch points to bug 1906261, which stems from bug 1905023.

Essentially, before Firefox 131, the CSS zoom property did not zoom SVGs properly.

@TMarciDev Would you be interested in opening a PR adding notes in the support statement below?

https://github.com/mdn/browser-compat-data/blob/57fc9c50e37096d10474038d3df7ed820130b0b2/css/properties/zoom.json#L19-L21

(@ddbeck Re. the hypothetical guidelines, would you set partial for a CSS property that is broken in Firefox only for SVGs?)

[ddbeck]

(@ddbeck Re. the hypothetical guidelines, would you set partial for a CSS property that is broken in Firefox only for SVGs?)

I wouldn't in this specific case, mostly because I'm not sure how to describe the problem here. Looking through the bugs, it seems to affect some SVG elements more than others. Maybe it's actually a problem with those elements? It seems complex enough that I don't think I would assign blame to the CSS property itself. If I were to set a partial, I'd be more likely to do it on one (or more) of the SVG elements. But in this case, I'd probably use a note and link to the bugs, without a partial.

[TMarciDev]

In my latest experiment the issue was not present. One small detail however is when I change the width of the media and a zoom attribute is applied based on the screen size the problem occures again. If I reload the page it works just fine on the other size too. But this is a bit conserning about how the zoom style property is handled in Firefox. In any case I think this issue is solved.