Bug 167060

Summary: filter: drop-shadow radius looks different between animating and not animating
Product: WebKit Reporter: Sébastien LeBlanc <mrsebastienleblanc>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: dino, jonlee, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 10   
Hardware: Mac   
OS: macOS 10.12   
URL: https://codepen.io/mrleblanc101/pen/LxbgKb
Attachments:
Description Flags
Example of the bug
none
Exemple of the bug in latest webkit build none

Sébastien LeBlanc
Reported 2017-01-14 16:19:20 PST
Created attachment 298866 [details] Example of the bug I have applied a fliter:drop-shadow to a transparent PNG image on hover. When I add a transition to animate the propriety, the drop-shadow does not respect the css rule after the animation. This is a bug and was fixed in Chrome with Blink r155623. I can prevent this by adding a transform: translateZ(0); but this is not an ideal solution. See the attached vidéo for a more visual explanation.
Attachments
Example of the bug (1.23 MB, video/quicktime)
2017-01-14 16:19 PST, Sébastien LeBlanc 		no flags
Details
Exemple of the bug in latest webkit build (914.66 KB, video/quicktime)
2017-02-07 17:58 PST, Sébastien LeBlanc 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-01-17 16:40:39 PST
<rdar://problem/30064332>
Simon Fraser (smfr)
Comment 2 2017-01-17 16:49:09 PST
Can you please provide a link to a URL that we can use to reproduce the problem.
Sébastien LeBlanc
Comment 3 2017-01-17 17:29:52 PST
https://codepen.io/mrleblanc101/pen/LxbgKb
Simon Fraser (smfr)
Comment 4 2017-01-17 17:52:12 PST
I can't reproduce the bug in recent builds.
Sébastien LeBlanc
Comment 5 2017-01-17 18:00:47 PST
I was able to reproduce the issue on: - Safari Version 10.0.3 (12602.4.8) - Safari Technology Preview Release 21 (Safari 10.2, WebKit 12604.1.2) - Webkit Nighly Version 10.0.3 (12602.4.8, r210822)
Jon Lee
Comment 6 2017-01-17 18:27:21 PST
I do see the snap in the drop shadow. I'm on a retina iMac.
Sébastien LeBlanc
Comment 7 2017-01-17 18:36:47 PST
That is exactly the problem. Thanks for explaining it so simply ! The filter:drop-shadow snap after transitioning because it does not behave the same way when accelerated or not. My temporary solution is to use translateZ(0) to force acceleration so the drop-shadow does not snap.
Simon Fraser (smfr)
Comment 8 2017-01-17 20:39:49 PST
Ah, the snap. That's because of a disagreement between CA's shadow radius, and our software code path.
Sébastien LeBlanc
Comment 9 2017-02-07 17:58:57 PST
Created attachment 300867 [details] Exemple of the bug in latest webkit build The bug is still present in the latest webkit build
Note You need to log in before you can comment on or make changes to this bug.