CSS animation using transforms + percentages does not reset to correct starting position

Fixed Issue #4648532


Sep 18, 2015
This issue is public.
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce


Repro Steps:


  1. Navigate to http://codepen.io/traviskaufman/pen/avNXGv

  2. Click the checkbox next to the text “Toggle Width Change + Animation”

  3. Observe how on the first iteration, the blue box begins animating near the green line, but on subsequent animations begins animating slightly past the red line.

  4. Edit the CSS rule on line 27 in the CSS window and change the width to be 5%. The result pane should update automatically.

  5. Click the checkbox again to re-run the animation.

  6. Observe how the animation always starts near the green line on every iteration.

Expected Results:


If a style rule is applied to an element that both changes its width and applies an animation using a translation transform, when the animation restarts it the element’s starting position should reflect the new width, rather than the old one.

For example, say I have a parent container that is 250px long and a child element with a width of 10%, and a class that both changes the child’s width to 5% and adds an animation that animates the child’s transform property from translateX(50%) to translateX(150%). On every iteration, the child element should go from being translated by 6.25px to being translated to 18.75px. Instead it seems on subsequent iterations it goes from being translated by 12.5px to 18.75px.

Actual Results:


Dev Channel specific:




0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Steps to Reproduce

      Changed Assigned To from “Christian F.” to “IE S.”

      Changed Status to “Fixed”

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

    Sign in