Chaining translate transforms with transitions sometimes play backwards

Fixed Issue #13560407

Details

Author
James W.
Created
Sep 1, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
15.15063
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

As title; I’m using CSS transition/transform to move an element, and if I try to control where the transition starts from by temporarily disabling transitions and positioning it, sometimes Edge plays the transition backwards, moving from the destination to the origin.

https://codepen.io/anon/pen/RZvYbK

In IE11, Firefox and Chrome, the red square will oscillate from right to left to right to left.
In Edge, the red square will move from right to left, snap to the right, move left, snap, move, snap, move.

Attachments

Comments and activity

  • Workaround: switch from translate to left/top
    https://codepen.io/anon/pen/WEPYzZ
    Downside: performance is worse, especially on Chrome

  • Workaround: add a tiny offset (0.1px) on the Y axis when positioning
    https://codepen.io/anon/pen/rzPQdq
    Downside: the element isn’t where I need it to be

  • Also reproducible moving vertically
    https://codepen.io/anon/pen/XaOyqo
    Again, a tiny movement on the other axis (0.1px) works around
    https://codepen.io/anon/pen/JyxevQ

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Status to “Fixed”

  • Hello,

    Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge 16281 and is available in our latest Insider Preview build in the Fast ring.

    Best Wishes,
    The MS Edge Team

You need to sign in to your Microsoft account to add a comment.

Sign in