Bug 202360 – Animations stop if new tab opened (and closed)

• Component: Animations
• Status: RESOLVED FIXED

[Laszlo Varga]

I have got an error only in Safari browser.

Please visit this link see it

https://codepen.io/Lacika1981/pen/jONogML

If you open a new tab or visit an already open tab then the current animation finishes but the next one(s) plays only the very last frames of each animation.

The animations created this way are rejected by Google QA. It is critical as banners' animations stops working.

[Laszlo Varga]

Here is piece of code taken from HTML banner.

@keyframes gwd-gen-1gaigwdanimation_gwd-keyframes {
      0% {
        opacity: 1;
        left: 46px;
        animation-timing-function: linear;
      }
      84.8485% {
        opacity: 1;
        left: 46px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 0;
        left: 46px;
        animation-timing-function: linear;
      }
    }
    #page1.gwd-play-animation .gwd-gen-1gaigwdanimation {
      animation: 3.3s linear 0s 1 normal forwards running gwd-gen-1gaigwdanimation_gwd-keyframes;
    }
    @keyframes gwd-gen-1thxgwdanimation_gwd-keyframes {
      0% {
        left: 46px;
        opacity: 0;
        animation-timing-function: linear;
      }
      19.2308% {
        left: 46px;
        opacity: 1;
        animation-timing-function: linear;
      }
      80.7692% {
        left: 46px;
        opacity: 1;
        animation-timing-function: linear;
      }
      100% {
        left: 46px;
        opacity: 0;
        animation-timing-function: linear;
      }
    }
    #page1.gwd-play-animation .gwd-gen-1thxgwdanimation {
      animation: 2.6s linear 3.3s 1 normal forwards running gwd-gen-1thxgwdanimation_gwd-keyframes;
    }

This code has been generated by Google Web Designer app.

As I said in my first comment the animation breaks only in Safari browser and maybe caused by the delay.

[Laszlo Varga]

I have done test and the problem definitely caused by the delay property.

If I use animations without delay but changing the steps then the animations play fine. I.e. I want an animation starts from 3s and change opacity from 0 to 1 then instead of using 3s delay I make changes to the steps.

Eaxapmle:

Each animation lasts 6s but the second one will change opacity to 1 at 3s

@keyframes anim1 {
      0% {
        opacity: 1;
        left: 46px;
        animation-timing-function: linear;
      }
      50% {
        opacity: 1;
        left: 46px;
        animation-timing-function: linear;
      }
      51% {
        opacity: 0;
        left: 46px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 0;
        left: 46px;
        animation-timing-function: linear;
      }
}

@keyframes anim1 {
      0% {
        opacity: 0;
        left: 46px;
        animation-timing-function: linear;
      }
      50% {
        opacity: 0;
        left: 46px;
        animation-timing-function: linear;
      }
      51% {
        opacity: 1;
        left: 46px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        left: 46px;
        animation-timing-function: linear;
      }
}

This way the animations work fine. Using delay they break

[Alexey Proskuryakov]

Ugh. Thank you for the test case!

[Radar WebKit Bug Importer]

<rdar://problem/55923261>

[Antoine Quint]

I can reproduce the issue with the default settings, but in STP 93, if I ensure both "Web Animations" and "CSS Animations via Web Animations" are checked under Develop > Experimental Features, the animation behaves as expected.

[Antoine Quint]

Laszlo, would you mind verifying that is indeed the case?

[Antoine Quint]

Actually, with ToT, the initial color animation works as expected, but the translation animation pauses immediately after starting and then just snaps to intermediate values. Looking into this now.

[Antoine Quint]

Created attachment 385953 [details]
Test

[Antoine Quint]

This is an issue with accelerated animations, using margin-left instead of transform for the nudge and nudge-2 animations fixes the issue.

[Antoine Quint]

As it turns out, the animation is not accelerated because we mix software-based animations (background-color) and accelerated animations (transform). However we do create a layer for the element while the transform animations should be running but fail to commit the accelerated animations, which disables the software animation code.

In the old engine we would run accelerated animations when mixing accelerated and non-accelerated properties. We should bring this back.

[Antoine Quint]

Created attachment 385984 [details]
Patch

[Dean Jackson]

Comment on attachment 385984 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=385984&action=review

> Source/WebCore/animation/KeyframeEffect.cpp:1396
> +    // In the case where we have a composited renderer, we'll be applyng all pending accelerated actions.

Typo applyng

> Source/WebCore/animation/KeyframeEffect.cpp:1406
> +        // we should reset the flag to run acceleratd.

Typo acceleratd

[Antoine Quint]

Created attachment 386024 [details]
Patch for landing

[WebKit Commit Bot]

Comment on attachment 386024 [details]
Patch for landing

Clearing flags on attachment: 386024

Committed r253728: <https://trac.webkit.org/changeset/253728>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Antoine Quint]

Reset the platform-specific expectation for imported/w3c/web-platform-tests/dom/events/Event-dispatch-on-disabled-elements.html in r253746. I did that originally because that's what EWS was warning me about but now the bots are definitely not happy with that.