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.
<rdar://problem/82516118>
This is a pretty amazing bug, thanks for reporting, I will look into this.
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.
Created attachment 450753 [details] Patch
Created attachment 450754 [details] Patch
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()
(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.
Created attachment 450762 [details] Patch for landing
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].