Bug 219406 - CSS filter drop shadow flicker during transition
Summary: CSS filter drop shadow flicker during transition
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 14
Hardware: Mac Other
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-12-01 12:17 PST by Rémi Kalbe
Modified: 2020-12-03 17:47 PST (History)
6 users (show)

See Also:


Attachments
The issue (1.42 MB, image/gif)
2020-12-01 12:17 PST, Rémi Kalbe
no flags Details
Test reduction (452 bytes, text/html)
2020-12-03 10:03 PST, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Rémi Kalbe 2020-12-01 12:17:54 PST
Created attachment 415150 [details]
The issue

Hello,

When you have an element that, when hovered, has a "filter: drop-shadow" inside a div, that has also a filter with drop-shadow, everything flickers on hover.
This also happens with elements that have a transform on hover.

Here is a repro
https://codepen.io/RemiVillien/pen/vYXOoEw

Everything is very slow and buggy.
There isn't any issue with chrome or firefox.
Comment 1 Simon Fraser (smfr) 2020-12-03 10:03:57 PST
Created attachment 415308 [details]
Test reduction
Comment 2 Simon Fraser (smfr) 2020-12-03 10:04:14 PST
Reduction shows that the blur radius of drop-shadow on composited layers is wrong.
Comment 3 Radar WebKit Bug Importer 2020-12-03 10:04:37 PST
<rdar://problem/71941564>
Comment 4 Simon Fraser (smfr) 2020-12-03 16:48:38 PST
Note to self: https://dbaron.org/log/20110225-blur-radius
Comment 5 Simon Fraser (smfr) 2020-12-03 17:47:40 PST
There are various things here. There's a box-shadow rendering bug in Core Graphics (you can work around this by setting a small border-radius). There's a difference between drop-shadow() rendering when software-rendered, and when accelerated (i.e. during the transitions); this is because of clamping of the blur radius, which is pretty high.