1893883 - SVG positioning differs from other browsers when using rotated <text> elements

Status: NEW

(Core :: SVG, defect)

Description

[cengels]

Attachment: Display difference between browsers

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

Steps to reproduce:

See the following codepen: https://codepen.io/cengels/pen/GRLLNXy

An SVG must be constructed, and from what I can tell the following conditions must be met:

• There must be a parent <g> element.
• The <g> element must contain an arbitrary element and a sibling <text> element.
• The <g> element must have a CSS transform translation and rotation.
• The <text> element must also have a rotation.
• transform-box: fill-box or content-box must be set on both the <text> and the <g> element.

Actual results:

In Firefox (both stable 125 and Nightly 127.0a1), the black rectangle is shifted slightly towards the top left.

Expected results:

The rectangle should be perfectly centered within the SVG. This is the result in most if not all modern browsers (tested on Edge, Chrome, Brave, Vivaldi, and Opera).

I did some rudimentary version testing and found that the SVG was rendered correctly prior to Firefox 68.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Web Painting' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Mayank Bansal]

Bisection:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=b13f2b24ae625d16fdeeb61cdec10978c3c75638&tochange=b0d41799ceb31e39ea857f18f4a65e8944818c6a

Comment 3

[Robert Longson [:longsonr]]

almost certainly a duplicate of bug 1612347

Comment 4

[Boris Chiou [:boris]]

Mark S3, just like Bug 1612347. (And we could fix either one first, and verify the other one.)

Comment 5

[Boris Chiou [:boris]]

Attachment: Testcase copied from https://codepen.io/cengels/pen/GRLLNXy