Chaining translate transforms with transitions sometimes play backwards

Fixed Issue #13560407


James W.
Sep 1, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
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.

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.


Comments and activity

  • Workaround: switch from translate to left/top
    Downside: performance is worse, especially on Chrome

  • Workaround: add a tiny offset (0.1px) on the Y axis when positioning
    Downside: the element isn’t where I need it to be

  • Also reproducible moving vertically
    Again, a tiny movement on the other axis (0.1px) works around

  • 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