Bug 265028

Summary: Animation with @property and a filter goes wrong
Product: WebKit Reporter: Roland <bugs>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, bfulgham, bramus, bugs, graouts, koivisto, sabouhallawa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 17   
Hardware: Mac (Apple Silicon)   
OS: macOS 14   
URL: https://codepen.io/ROL4ND909/pen/JjxOZxq/7b160acb4944937bacdc5a2d95da796c?editors=0100
See Also: https://bugs.webkit.org/show_bug.cgi?id=266242
Attachments:
Description Flags
Safari screenshot
none
Orion screenshot
none
Reduction of issue with combined transition and animation with custom properties none

Description Roland 2023-11-17 06:34:57 PST 
In Safari a element with a filter blur() and an animation on a @property breaks the view.
See srceenshots for different browsers.

See here for a working example.
https://codepen.io/ROL4ND909/pen/JjxOZxq/7b160acb4944937bacdc5a2d95da796c?editors=1100
Comment 1 Roland 2023-11-17 06:35:32 PST 
Created attachment 468640 [details]
Safari screenshot
Comment 2 Roland 2023-11-17 06:42:56 PST 
Here an example without the explode same result in Safari

https://codepen.io/ROL4ND909/pen/rNZKrxP?editors=0100
Comment 3 Ahmad Saleem 2023-11-19 07:13:11 PST 
With Orion using (WebKit 618.1.2), I am not able to reproduce this bug while I am able to reproduce this with Safari 17.1 (Version 17.1 (19616.2.9.11.7)).

So it seems to be regression.
Comment 4 Roland 2023-11-20 03:15:27 PST 
The behaviour is better in Orion using (WebKit 618.1.2) but not the same as Firefox and Chrome
Comment 5 Roland 2023-11-20 03:16:53 PST 
Created attachment 468671 [details]
Orion screenshot
Comment 6 Radar WebKit Bug Importer 2023-11-24 06:35:14 PST 
<rdar://problem/118772059>
Comment 7 Antoine Quint 2023-12-11 06:17:50 PST 
The example without the explode (https://codepen.io/ROL4ND909/pen/rNZKrxP) looks mostly the same in Chrome and Safari Technology Preview 184, with the only noticeable difference being some clipping-related issue around the corners.

The example with the explode shows a clear issue with the blur layer disappearing once the animation settles. These are likely two very different issues warranting two different bugs.
Comment 8 Antoine Quint 2023-12-11 06:34:47 PST 
With the explosion, the issue is that the `<div class="blur">` element which has the specified value "transform: translate3d(0, 0, var(--depth))" computes to "none", whereas `--depth` is set to `8rem`. Setting `--depth` to `123px` for instance makes the issue go away, and setting it back to `8rem` makes it occur again (upon the next style update). So there might be a CSS bug here.
Comment 9 Antoine Quint 2023-12-11 07:42:04 PST 
Created attachment 468974 [details]
Reduction of issue with combined transition and animation with custom properties

Adding a reduction of the issue that causes the blur layer to disappear during the explosion animation. The issue seems to be related to the combination of a CSS Animation and CSS Transition on the same element where custom properties are involved.
Comment 10 Antoine Quint 2023-12-11 07:48:28 PST 
In the reduction, if you query the "transform" computed style after the transition is complete, you'll see that it reports "none".
Comment 11 Antoine Quint 2023-12-11 11:17:07 PST 
I've filed bug 266242 about the rendering artifacts around the card's corners.