1381201 - SVG: Incorrect behaviour when transitioning a transform

Status: RESOLVED DUPLICATE of bug 878346

(Core :: SVG, defect, P2)

Description

[Paul LeBeau]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170628075643

Steps to reproduce:

Try the following sample in FF54. Hover over the SVG.

<svg width="588px" height="512px" viewBox="0 0 588 512">
    <g id="clock_bottom_3" transform="translate(72 306)">
        <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse>
    </g>
</svg>

#clock_bottom_3 {transition: transform 0.3s;}
svg:hover #clock_bottom_3 {transform: translate(72px, 320px);}
 
https://jsfiddle.net/3hvassfh/


Actual results:

The animation seems to start from 0,0. Ie. it ignores the initial transform on the element.


Expected results:

Should just move down by 14px on hover.

The workaound is to wrap the element in a container element with no transform.

<svg width="588px" height="512px" viewBox="0 0 588 512">
    <g id="clock_bottom_3_wrap">
        <g id="clock_bottom_3" transform="translate(72 306)">
            <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse>
        </g>
    </g>
</svg>

#clock_bottom_3_wrap {transition: transform 0.3s;}
svg:hover #clock_bottom_3_wrap {transform: translate(0px, 14px);}

https://jsfiddle.net/3hvassfh/1/

Comment 1

[Astley Chen (inactive)]

Louis, could you confirm that whether it's a regression or not?

Comment 2

[Louis Chang [:louis]]

I have tested the bug on FF52 & FF53. The bug still appears on both of them. I think it's not a regression.

Comment 3

[Louis Chang [:louis]]

I will try look into the bug.

Comment 4

[Louis Chang [:louis]]

(In reply to Louis Chang [:louis] from comment #2)
> I have tested the bug on FF52 & FF53. The bug still appears on both of them.
> I think it's not a regression.

I have further tested the bug with mozregression. It seems that the bug has existed since we started support svg transition of a transform.

Comment 5

[u459114]

Attachment: svg-transform.svg

Comment 6

[u459114]

Attachment: svg-transform.svg