SVG: Incorrect behaviour when transitioning a transform

RESOLVED DUPLICATE of bug 878346

Status

()

P2
normal
RESOLVED DUPLICATE of bug 878346
a year ago
a year ago

People

(Reporter: paul.lebeau, Assigned: lochang)

Tracking

(Blocks: 1 bug)

54 Branch
Points:
---

Firefox Tracking Flags

(firefox56 affected)

Details

Attachments

(1 attachment, 1 obsolete attachment)

416 bytes, image/svg+xml
Details
(Reporter)

Description

a year ago
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/
Status: UNCONFIRMED → NEW
Component: Untriaged → SVG
Ever confirmed: true
Product: Firefox → Core
Priority: -- → P3
Louis, could you confirm that whether it's a regression or not?
status-firefox56: --- → affected
Flags: needinfo?(lochang)
Priority: P3 → P2
(Assignee)

Comment 2

a year ago
I have tested the bug on FF52 & FF53. The bug still appears on both of them. I think it's not a regression.
Flags: needinfo?(lochang)
(Assignee)

Comment 3

a year ago
I will try look into the bug.
Assignee: nobody → lochang
(Assignee)

Comment 4

a year ago
(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.
Blocks: 1262352

Comment 5

a year ago
Created attachment 8889787 [details]
svg-transform.svg

Comment 6

a year ago
Created attachment 8889790 [details]
svg-transform.svg
Attachment #8889787 - Attachment is obsolete: true
(Assignee)

Updated

a year ago
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → DUPLICATE
Duplicate of bug: 878346
You need to log in before you can comment on or make changes to this bug.