Element inside animated element moves on its own

Fixed Issue #12308443

Details

Author
Arne S.
Created
Jun 12, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
40.15063
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Visit https://jsfiddle.net/rsvmbcqn/
  2. Using the debug tool, inspect the element with id rotate2
  3. Enable the highlight DOM-element functionality to see margins etc.
  4. Hover your mouse over the element to highlight it.
  5. Let the animation run a few times

Expected behaviour:
The text (rotate3 element with the text TEST) follows the rotate2 element.

Actual behaviour:
The rotate3 element seems to move slightly faster than the rotate2 element, making the TEST text crawl into the padding of the rotate2 element.

  1. Hover the mouse cursor over the moving element.

Expected behaviour:
rotate2 animation is paused, the text stops in place.

Actual behaviour:
The animation is paused, but rotate3 snaps back to where I expected it to be in the first place.

Attachments

0 attachments

    Comments and activity

    • Changed Title from “Animation translate3d” to “Element inside animated element moves on its own”

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

    • Hello,

      Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge 16220 and should be in our latest Insider Preview build in the Fast ring.

      Best Wishes,
      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “Fixed”

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

    Sign in