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

Issue #4648532 • Assigned to Christian F.

Details

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

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

==============

  1. Navigatehttp://codepen.io/traviskaufman/pen/avNXGv](http://codepen.io/traviskaufman/pen/avNXGv)[http://codepen.io/traviskaufman/pen/avNXGv](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:

================

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Christian F.”

      Changed Steps to Reproduce

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

    Sign in