Bug 229398

Summary: Incorrect KeyframesEffect generated for background
Product: WebKit Reporter: Matt Perry <mattgperry>
Component: AnimationsAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: darin, dino, graouts, graouts, koivisto, mattgperry, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 11   
Attachments:
Description Flags
Patch
none
Patch
none
Patch for landing none

Description Matt Perry 2021-08-23 02:31:17 PDT 
Visit this sandbox in Safari: https://codesandbox.io/s/waapi-webkit-iteration-timing-bug-forked-8ozd3?file=/src/index.js

The middle box fails to animate `background`.

Logging the generated KeyframeEffect reveals the first keyframe contains `background: #ff2965` as expected. However, the final keyframe contains `backgroundImage: ""`

Either:
  - Removing `opacity` keyframes OR
  - Removing one `transform` keyframe

Will fix this, and all three boxes will animate `background` as expected.
Comment 1 Radar WebKit Bug Importer 2021-08-30 02:32:45 PDT 
<rdar://problem/82516118>
Comment 2 Antoine Quint 2021-09-08 07:19:43 PDT 
This is a pretty amazing bug, thanks for reporting, I will look into this.
Comment 3 Antoine Quint 2022-02-03 02:32:24 PST 
This happens when merging adjacent keyframes in processPropertyIndexedKeyframes(). I just found out that adding a shorthand property to a MutableStyleProperties expands it to longhands, and the merging code gets confused.
Comment 4 Antoine Quint 2022-02-03 02:53:43 PST 
Created attachment 450753 [details]
Patch
Comment 5 Antoine Quint 2022-02-03 02:55:15 PST 
Created attachment 450754 [details]
Patch
Comment 6 Darin Adler 2022-02-03 03:39:14 PST 
Comment on attachment 450754 [details]
Patch

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

> Source/WebCore/animation/KeyframeEffect.cpp:402
> +            previousKeyframe.style->mergeAndOverrideOnConflict(keyframe.style.get());

Might not need that get()
Comment 7 Antoine Quint 2022-02-03 03:51:57 PST 
(In reply to Darin Adler from comment #6)
> Comment on attachment 450754 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=450754&action=review
> 
> > Source/WebCore/animation/KeyframeEffect.cpp:402
> > +            previousKeyframe.style->mergeAndOverrideOnConflict(keyframe.style.get());
> 
> Might not need that get()

Indeed, will fix in commit.
Comment 8 Antoine Quint 2022-02-03 05:00:26 PST 
Created attachment 450762 [details]
Patch for landing
Comment 9 EWS 2022-02-03 06:03:38 PST 
Committed r289048 (246755@main): <https://commits.webkit.org/246755@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 450762 [details].