Bug 289234 – `background-blend-mode` no longer applied after an animation with `animation-fill-mode: forwards` finishes

• Component: Animations
• Status: RESOLVED DUPLICATE

[Bramus]

DEMO: https://scroll-driven-animations.style/demos/cover-to-fixed-header/css/

This uses a Scroll-Driven Animation. It animates the `background-color` and the `background-position` on scroll. The `background-blend-mode` is not animated and set to `soft-light` to make it look like the set `background-image` is getting a color tone applied to it as you scroll.

While the animation is running, the `background-color` nicely blends with the set `background-image`: the more you scroll down, the more dark-blue the background becomes. However,  when the animation finishes (because you reached the `animation-range-end`) the `background-image` gets shown without the dark-blue tone applied to it. By the looks of it, the `background-blend-mode` no longer gets applied.

Because the `animation-fill-mode` is set to `forwards`, I would have expected the blending to still occur after the animation has finished. This is the case in Chrome, but not in Safari.

Note: This is not caused by the Scroll-Driven Animation. Removing the `animation-timeline: scroll()` so that the animation uses the `DocumentTimeline` shows the same symptoms.

[Karl Dubost]

Created attachment 474507 [details]
rendering in safari, firefox, chrome

bramus, thanks for the report.

I can't reproduce or maybe I do not understand what the testcase is trying to show. On Firefox nothing is displayed btw.


tested on 
Safari Technology Preview  214 / 18.4          20622.1.2.111.3
Firefox Nightly            138.0a1       13825.3.9
Google Chrome Canary       136.0.7059.0  7059.0

[Bramus]

Created attachment 474510 [details]
Screen Recording [Safari Technology Preview, Release 214 (Safari 18.4, WebKit 20622.1.2.111.3)]

Re-testing things now I noticed it worked correctly … until I resized the window. See attached recording.

It is expected that Firefox does not do anything, as they don’t support Scroll-Driven Animations yet (which is used in this demo).

Also note that it’s a horizontal resize, which has no affect on the used ranges of the Scroll-Driven Animation that is used (it tracks the vertical axis), so I believe you can exclude Scroll-Driven Animations as the cause here.

(Apologies for not being able to create a reduced test case at this time)

[Radar WebKit Bug Importer]

<rdar://problem/146944954>

[Ahmad Saleem]

@Bramus - is it still reproducing for you, I tried and couldn't manage to reproduce.

[Bramus]

This reproduces in Safari 26.3.1, but not in Safari TP (and I would assume neither on Safari 26.4 — I still need to install and check that version).

I think the added support for Threaded Scroll-Driven Animations (https://github.com/WebKit/WebKit/commit/1a9ec55a0f5ef1ba236b1feca397d170b52b0470) is what fixed this, but not sure if other work needs to be done here.

[Ahmad Saleem]

(In reply to Bramus from comment #5)
> This reproduces in Safari 26.3.1, but not in Safari TP (and I would assume
> neither on Safari 26.4 — I still need to install and check that version).
> 
> I think the added support for Threaded Scroll-Driven Animations
> (https://github.com/WebKit/WebKit/commit/
> 1a9ec55a0f5ef1ba236b1feca397d170b52b0470) is what fixed this, but not sure
> if other work needs to be done here.

Thanks for confirming, I will check with Antoine, if he can share some insight / Karl.

[Antoine Quint]

This was not fixed by an animation-related change but with 305118@main! Marking as a duplicate of bug 267129.

[Antoine Quint]

*** This bug has been marked as a duplicate of bug 267129 ***