CSS3 animation-play-state not working correctly

Fixed, flighted Issue #2765965

Details

Created
May 5, 2015
Privacy
This issue is public.
Found in build #
10.10112
Fixed in build #
15026
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

repros in spartan, IE, and mshtmpad

 

  1. Open BetaFish on IE test drive (http://ie.microsoft.com/testdrive/Performance/BetaFishIE/)
  1. Click the pause button in the bottom right hand corner
  1. Click the play button

Expected:

The fish pauses/plays. Once resumed the fish continues animate to the end of the window then flips around and animate to the other side

Actual:

The fish pauses/plays. Once the fish resumes it will animate to the end of the window but the fish will flip early so it is swimming backwards. If you have the fish pause for the time it would take to reach the end of the window it will flip while paused.  

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Scott B.”

      Changed Status to “Confirmed”

      Changed Steps to Reproduce

      Changed Title from “CSS3 animation-play-state not working correctly” to “CSS3 animation-play-state not working correctly”

      Changed Assigned To from “Scott B.” to “Angelina G.”

      Changed Status from “Confirmed” to “Won’t fix”

      Changed Assigned To to “Scott B.”

      Changed Status from “Won’t fix”

      Changed Status to “Needs root cause”

      Changed Assigned To from “Scott B.” to “Olga G.”

      Changed Assigned To from “Olga G.” to “Rick J.”

      Changed Assigned To from “Rick J.” to “Olga G.”

      Changed Assigned To from “Olga G.” to “Angelina G.”

      Changed Status from “Needs root cause” to “Fixed, flighted”

    • I am reporting the problem here, since here is where the original ID 1845585 has been moved.
      This test case is way too complex and also uses old proprietary tags.
      The main problem is that “animation-play-state: paused” doesn’t work on explorer (edge)
      The problem can be reproduced with the following html file:

      #mydiv {
      position:relative;
      animation-name:zoomin;
      animation-duration:80s;
      transform-origin:left top;
      }

      .paused {
      animation-play-state:paused;
      }

      Pause

      This should zoom in and stop when you press the Pause button. It works on chrome and Firefox.

    • The sample code i just copied here got all the tag removed. :(
      I try again after reformatting it:

      <!doctype html>
      <html>
      <head>
      <style>
      #mydiv {
      position:relative;
      animation-name: zoomin;
      animation-duration: 80s;
      transform-origin: left top;
      }
      @keyframes zoomin {
      0% {
      transform: scale(1);
      }
      100% {
      transform: scale(3);
      }
      }
      .paused {
      animation-play-state: paused;
      }
      </style>
      </head>

      <body>
      <button id=’pause’ onclick=’pause();’>Pause</button>
      <br><br>
      <div id=’mydiv’>This should zoom in and stop when you press the Pause button. It works on chrome and Firefox.</div>

      </body>

      <script>
      function pause() {
      document.getElementById(“mydiv”).className = "paused";
      }
      </script>

      </html>

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

    Sign in