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

Roland
Reported 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
Attachments
Safari screenshot (713.63 KB, image/png)
2023-11-17 06:35 PST, Roland 		no flags
Details
Orion screenshot (467.11 KB, image/png)
2023-11-20 03:16 PST, Roland 		no flags
Details
Reduction of issue with combined transition and animation with custom properties (852 bytes, text/html)
2023-12-11 07:42 PST, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Roland
Comment 1 2023-11-17 06:35:32 PST
Created attachment 468640 [details] Safari screenshot
Roland
Comment 2 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
Ahmad Saleem
Comment 3 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.
Roland
Comment 4 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
Roland
Comment 5 2023-11-20 03:16:53 PST
Created attachment 468671 [details] Orion screenshot
Radar WebKit Bug Importer
Comment 6 2023-11-24 06:35:14 PST
<rdar://problem/118772059>
Antoine Quint
Comment 7 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.
Antoine Quint
Comment 8 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.
Antoine Quint
Comment 9 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.
Antoine Quint
Comment 10 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".
Antoine Quint
Comment 11 2023-12-11 11:17:07 PST
I've filed bug 266242 about the rendering artifacts around the card's corners.
Note You need to log in before you can comment on or make changes to this bug.