Bug 219406

Summary: CSS filter drop shadow flicker during transition
Product: WebKit Reporter: Rémi Kalbe <remi.kalbe>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Major CC: dino, graouts, remi.kalbe, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Mac   
OS: Other   
Attachments:
Description Flags
The issue
none
Test reduction none

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.