1523343 - SVG: Null/any transform causes translation in X axis

Status: RESOLVED FIXED

(Core :: SVG, defect, P3)

Description

[Paul LeBeau]

Try the following SVG: https://jsfiddle.net/5fc9bz1u/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<rect x="0" y="0" width="2.5" height="10"/>
<rect x="2.86" y="0" width="2.5" height="10"/>
<rect x="5.71" y="0" width="2.5" height="10"/>
<rect x="8.57" y="0" width="2.5" height="10"/>
<rect x="11.43" y="0" width="2.5" height="10"/>
</svg>

rect {
transform: scaleY(1);
}

The CSS transform scaleY seems to cause the rectangles to move (translate) in the X direction. Compare with non-transformed version: https://jsfiddle.net/5fc9bz1u/1/

In fact any transform at all seems to cause this movement. Eg. even translate(0,0)
https://jsfiddle.net/5fc9bz1u/2/

Interestingly, the issue disappears if the rectangles have X coordinates that are whole numbers. See: https://jsfiddle.net/5fc9bz1u/3/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<rect x="0" y="0" width="2.5" height="10"/>
<rect x="3" y="0" width="2.5" height="10"/>
<rect x="6" y="0" width="2.5" height="10"/>
<rect x="9" y="0" width="2.5" height="10"/>
<rect x="12" y="0" width="2.5" height="10"/>
</svg>

Original Stack Overflow question reporting this issue: https://stackoverflow.com/questions/54406088/svg-rectangles-pushed-together-in-firefox-but-not-chrome-safari

Comment 1

[Paul LeBeau]

After a little more investigation, it appears as if the x coordinate is getting rounded before the transformation is applied.

If I round the original x coordinates and remove the transform, I get the same result as the original example.

https://jsfiddle.net/5fc9bz1u/5/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<rect x="0" y="0" width="2.5" height="10"/>
<rect x="3" y="0" width="2.5" height="10"/>
<rect x="6" y="0" width="2.5" height="10"/>
<rect x="9" y="0" width="2.5" height="10"/>
<rect x="11" y="0" width="2.5" height="10"/>
</svg>

rect {
}

Comment 2

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=f2e79915832dbd98afafa91751bfad66eab77e13&tochange=0901f80a81dbc1073f3355016119586524cf81e9

Regressed by: Bug 828240

Comment 3

[Neha Kochar [:neha]]

Jonathan, I'm tracking 67 regression bugs and this showed up. Since this is marked as regressing from your bug, I'm wondering if you have looked into this.

Comment 4

[Jonathan Watt [:jwatt]]

The bug that regressed this landed two years ago. Given that, I don't think there's much reason to treat this differently to any other bug. Either way, I probably won't get to this any time soon.

Comment 5

[violet.bugreport]

Attachment: Bug 1523343 - Should not round translation for SVG frame

When computing transform matrix, translation in SVG should not be rounded.
Checking !IsSVGTransformed() isn't the correct way, since an SVG frame may
have CSS transform applied.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5830f058ab4e
Should not round translation for SVG frame r=longsonr

Comment 7

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/5830f058ab4e