Bug 186996 – Element.animate() animations are stopped permanently if the browser window is not visible

• Component: Animations
• Status: RESOLVED WORKSFORME

If the browser window is made hidden and then visible, animations created with Web Animation API are not resumed.

Example: https://codepen.io/anon/pen/eKjgyo

Steps to reproduce:

1. Set up an infinite animation like this:

  var animation = document.getElementById("box").animate([
    { transform: 'rotate(0deg)', offset: 0 },
    { transform: 'rotate(270deg)', offset: .5 },
    { transform: 'rotate(0deg)', offset: 1 }
  ], {
    duration: 3000,
    iterations: Infinity,
    easing: 'linear',
    delay: 0
  });

2. Ensure that the animation rotates the element.
3. Hide the browser window by pressing the orange '-' minimize button or by pressing Command-M.
4. Bring the window visible by clicking it in the dock.
5. The element should still be rotating.

Expected Result:
After bringing the window visible in step 4, the element should still be rotating.

Actual Results:
The element is no longer rotating.

It seems that simply dragging another window on top of the browser window will have the same effect as minimizing. I tested also CSS animations, and they are resumed correctly. I would expect Web Animations to behave the same way.

Build: Release 59 (Safari 12.0, WebKit 13606.1.21)

[Radar WebKit Bug Importer]

<rdar://problem/41424983>

[Antoine Quint]

Thanks for filing this bug. This does not reproduce for me in the most recent Safari Technology Preview (64 as of this writing). Can you check that this is indeed fixed?

I tested it again in Safari Technology Preview 64 and it works now.

Thank you for your hard work implementing WAAPI. :)