Steps to reproduce
Create a CSS animation that applies a CSS translate combined with any other transform (even another translate) and the animation will behave unpredictably.
See the attached HTML file for a test that runs two identical images through two similar animations. The animation on the left does scaling, translating in two directions, and rotating. Its companion animation does only the
translateY of the first, with the exact same keyframe percentages.
Chrome, Firefox, IE 11, and Edge (pre EdgeHtml 16) render the first animation correctly. Current Edge fails to ease between the keyframes appropriately, with various unpredictable results. The animation also ends up running longer than the 5 seconds specifed.
The simpler animation plays smoothly in all browsers, though current Edge sometimes (but not consistently) seems to disregard
animation-timing-function: linear; and the animation looks sloppy as a result.
This seems to be a large regression on the animation engine’s part, because as I said earlier, IE 11 and earlier versions of Edge can play this animation entirely correctly.
Upon further testing, we’ve discovered that using pixels instead of any dynamic value (percent,
vh) in the translate calls makes Edge behave better. That doesn’t solve the issue if you require your animation to be dynamically sized to its contents or viewport.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Steven K.”
Changed Assigned To to “comptriage”
Changed Status to “Confirmed”
Changed Assigned To to “wptcomptri”