1454818 - SVG transform-origin and transform-box with small viewBox and floated numbers

Status: RESOLVED DUPLICATE of bug 1396642

(Firefox :: Untriaged, defect)

Description

[Bx]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0
Build ID: 20180323154952

Steps to reproduce:

In Firefox in order to have real transform-origin: center we have to add transform-box: fill-box. It works very well in casual situations, but there are some problems.

When we have small svg's viewBox (eg. <svg viewBox="0 0 10 10">) and we have to use floated numbers in order to provide exact center position in svg space there is some strange behaviour — fill-box is ignored.

First SVG:
1) set small svg viewBox `viewBox="0 0 1 1"`.
(<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 1 1">)
2) create <rect> which will be a square half of svg size in the center of svg.
(<rect class="spin" height=".5" width=".5" x="0.25" y="0.25"/>)
3) add CSS class to the rectangle with `transform-origin: center` and `transform-box: fill-box`.
4) add CSS transform animation (rotate from 0 to 360deg) to the rectangle.
5) add lines which will divide svg space into 4 exact quarters for clarity.

5) set bigger svg viewBox `viewBox="0 0 100 100"`.
6) Do points 1-4 but with scale to new viewBox (multiply every value by 100)


Actual results:

https://jsfiddle.net/6jckL4ne/

Left rectangle (first svg) is rotating in the center of the top-left quarter. The right rectangle (second svg) is rotating in the center of svg (the point of the intersection of two black lines).

Additional first svg has bolder (bigger) lines than second svg. Like the width would be rounded instead of setting exact number (eg. round(0.01)=0.05)


Expected results:

Both rectangles (left and right) should be rotating in the center of each svg (the point of the intersection of two black lines). Left lines should be as thin as the right svg's lines.

In Chrome everything works well.

Comment 1

[Robert Longson [:longsonr]]

Likely the same issue as bug 1396642