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.
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.
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
Ugh. Thank you for the test case!
<rdar://problem/55923261>
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.
Laszlo, would you mind verifying that is indeed the case?
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.
Created attachment 385953 [details] Test
This is an issue with accelerated animations, using margin-left instead of transform for the nudge and nudge-2 animations fixes the issue.
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.
Created attachment 385984 [details] Patch
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
Created attachment 386024 [details] Patch for landing
Comment on attachment 386024 [details] Patch for landing Clearing flags on attachment: 386024 Committed r253728: <https://trac.webkit.org/changeset/253728>
All reviewed patches have been landed. Closing bug.
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.