Bug 265028 – Animation with @property and a filter goes wrong

• Component: Layout and Rendering
• Status: NEW

[Roland]

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

[Roland]

Created attachment 468640 [details]
Safari screenshot

[Roland]

Here an example without the explode same result in Safari

https://codepen.io/ROL4ND909/pen/rNZKrxP?editors=0100

[Ahmad Saleem]

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]

The behaviour is better in Orion using (WebKit 618.1.2) but not the same as Firefox and Chrome

[Roland]

Created attachment 468671 [details]
Orion screenshot

[Radar WebKit Bug Importer]

<rdar://problem/118772059>

[Antoine Quint]

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]

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]

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]

In the reduction, if you query the "transform" computed style after the transition is complete, you'll see that it reports "none".

[Antoine Quint]

I've filed bug 266242 about the rendering artifacts around the card's corners.

[Simon Fraser (smfr)]

This seems to work correctly now?

[Antoine Quint]

Not with STP 220 anyway: the intermediary blur layer disappears upon animation completion after clicking on "Explode".

[Antoine Quint]

The issue split into bug 266242 also remains.