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

Rémi Kalbe
Reported 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.
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
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2020-12-03 10:03:57 PST
Created attachment 415308 [details] Test reduction
Simon Fraser (smfr)
Comment 2 2020-12-03 10:04:14 PST
Reduction shows that the blur radius of drop-shadow on composited layers is wrong.
Radar WebKit Bug Importer
Comment 3 2020-12-03 10:04:37 PST
<rdar://problem/71941564>
Simon Fraser (smfr)
Comment 4 2020-12-03 16:48:38 PST
Note to self: https://dbaron.org/log/20110225-blur-radius
Simon Fraser (smfr)
Comment 5 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.
Note You need to log in before you can comment on or make changes to this bug.