Looping CSS Animation Origin Bug

Fixed Issue #9299804

Details

Author
Jim H.
Created
Oct 11, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
20.10240
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

Steps to Reproduce

  1. Have a pseudo-element (such as :before) with an infinitely looping CSS animation that uses scale() in combination with translate() transformation.

Demo

http://jsfiddle.net/a6s8awmb/
(in this demo, the animation is triggered on hover of the parent element)

Expected Behavior

In the demo example, the pseudo-element should stay in place and only the scale() transformation should be animated.

Actual Behavior

After the first cycle of the animation finishes and it begins the loop, the psuedo-element jumps to an incorrect position. It behaves as if the transformation origin changed to a negative value in both axises. The actual translate() transformation is not maintained.

Notes

  • If the animation does not loop, this issue cannot be reproduced.
  • If the animation is applied without hover state, the issue still exists.
  • If the animation uses different keyframes, the issue still exists.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Rick J.”

    • terrible bug

    • Microsoft Edge Team

      Changed Status to “Fixed”

    • Thank you for reporting this issue. Should be fixed in rs2_release.

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

    Sign in