Some complex CSS animations behave unpredictably in Edge since EdgeHTML 16 (Fall Creators Update)

Issue #16910913 • Assigned to comptriage

Details

Author
Robert M.
Created
Apr 12, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
16.16299
Reports
Reported by 1 person

Sign in to watch or report this issue.

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, em, or 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.

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Assigned To to “comptriage”

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

Sign in