1625422 - Horizontal transform on SVG element with active layer produces vertical offset

Status: RESOLVED FIXED

(Core :: Graphics: Layers, defect, P3)

Description

[dongkingkong0]

Attachment: transition-offset-example.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:74.0) Gecko/20100101 Firefox/74.0

Steps to reproduce:

This problem occurs when animating the css transform property (happens through both transition and @keyframes) on svg elements that have the stroke-width property set to anything above 0.

Actual results:

The animation is offset by the stroke width and it "snaps" from the last frame to the resting position.
Note that this happens with all transform properties.

Expected results:

This is not the expected behavior, the offset looks odd. Also, this doesn't happen in other browsers (tested on Safari 13 and Chromium 71).

Comment 1

[dongkingkong0]

Here is some css that demonstrates the issue:

rect {
  stroke: #000;
  stroke-width: .5;
  fill: none;
  animation: demo 1s 1s forwards;
}

@keyframes demo {
  to {
    transform: translateX(4px);
  }
}

Comment 2

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

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Thank you for the bug report. Do you have a test file demonstrating the problem? I tried to reproduce but could not (although I am on Windows).

It's likely this is a graphics issue related to making the layer no longer active. You might be able to work around it with will-change: transform.

Comment 4

[dongkingkong0]

Attachment: firefox-stroke-transition-bug.html

Here's a file that demonstrates the issue. I've tested this on both macOS Catalina and ubuntu 18.04, it happens on both systems. will-change: transform did not solve the problem for me.

Comment 5

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Thanks for the test case! I can reproduce this without the animation simply by toggling the specified style on the rect between 'none' and 'translateX(1px)' so it doesn't appear to be animation-related. Moving to SVG.

Comment 6

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Attachment: Reduced test case without animation

Comment 7

[Brian Birtles (:birtles, Feb 26~ parental leave)]

It seems this is either triggered by animation or will-change: transform. Is an active layer the right term for that?

Moving to graphics for now.

Comment 8

[Firefox Bug Husbandry Bot]

Because this bug's Severity has not been changed from the default since it was filed, and it's Priority is P3 (Backlog,) indicating it has been triaged, the bug's Severity is being updated to S3 (normal.)

Comment 9

[Timothy Nikkel (:tnikkel)]

Caused by

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

bug 1523343.

Doing a manual revert of that changeset fixes the bug for me.

Comment 10

[Robert Longson [:longsonr]]

The patch in bug 1636119 fixes this.