NEW 285296
CSS Property: Blurred Linear Gradient Transition Fails to Animate Smoothly 
https://bugs.webkit.org/show_bug.cgi?id=285296
Summary CSS Property: Blurred Linear Gradient Transition Fails to Animate Smoothly
Yash Raj Bharti
Reported 2025-01-02 05:48:00 PST
Created attachment 473743 [details] Transition not working correctly when linear gradient has blur (CSS Property) ## Explanation: When a linear-gradient background is applied to an element with a filter: blur effect, the transition of a custom property (e.g., --gradBlue) that alters the gradient stops is not rendered correctly. Instead of a smooth transition across the gradient, only a central portion of the blurred gradient changes color. This behavior is inconsistent with Chrome, which handles the transition as expected, smoothly transitioning the gradient stops while maintaining the blur effect. Check codepen: https://codepen.io/driftblaze/pen/emOGqbK
Attachments
Transition not working correctly when linear gradient has blur (CSS Property) (50.37 KB, image/png)
2025-01-02 05:48 PST, Yash Raj Bharti 		no flags
Details
rendering in safari, firefox, chrome (1.69 MB, image/png)
2025-01-15 22:08 PST, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2025-01-09 05:48:13 PST
<rdar://problem/142614137>
Karl Dubost
Comment 2 2025-01-15 22:08:23 PST
Created attachment 473919 [details] rendering in safari, firefox, chrome I'm not seeing that on STP 210.
Yash Raj Bharti
Comment 3 2025-01-15 23:47:42 PST
It should be visible now, as it the earlier case the bug was visible via hover, but now using keyframes, it can be seen without any user interaction
Antoine Quint
Comment 4 2025-02-04 02:10:45 PST
This looks like a repaint issue.
Note You need to log in before you can comment on or make changes to this bug.