Steps to reproduce
Navigate to http://codepen.io/traviskaufman/pen/avNXGv
Click the checkbox next to the text “Toggle Width Change + Animation”
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.
Edit the CSS rule on line 27 in the CSS window and change the width to be 5%. The result pane should update automatically.
Click the checkbox again to re-run the animation.
Observe how the animation always starts near the green line on every iteration.
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.
Dev Channel specific:
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”