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?