Bug 229398 – Incorrect KeyframesEffect generated for background

• Component: Animations
• Status: RESOLVED FIXED

[Matt Perry]

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.

[Radar WebKit Bug Importer]

<rdar://problem/82516118>

[Antoine Quint]

This is a pretty amazing bug, thanks for reporting, I will look into this.

[Antoine Quint]

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.

[Antoine Quint]

Created attachment 450753 [details]
Patch

[Antoine Quint]

Created attachment 450754 [details]
Patch

[Darin Adler]

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()

[Antoine Quint]

(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.

[Antoine Quint]

Created attachment 450762 [details]
Patch for landing

[EWS]

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].