Bug 167060 - filter: drop-shadow radius looks different between animating and not animating
Summary: filter: drop-shadow radius looks different between animating and not animating
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 10
Hardware: Mac macOS 10.12
: P2 Normal
Assignee: Nobody
URL: https://codepen.io/mrleblanc101/pen/L...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-01-14 16:19 PST by Sébastien LeBlanc
Modified: 2017-02-07 17:58 PST (History)
4 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Sébastien LeBlanc 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.
Comment 1 Radar WebKit Bug Importer 2017-01-17 16:40:39 PST 
<rdar://problem/30064332>
Comment 2 Simon Fraser (smfr) 2017-01-17 16:49:09 PST 
Can you please provide a link to a URL that we can use to reproduce the problem.
Comment 3 Sébastien LeBlanc 2017-01-17 17:29:52 PST 
https://codepen.io/mrleblanc101/pen/LxbgKb
Comment 4 Simon Fraser (smfr) 2017-01-17 17:52:12 PST 
I can't reproduce the bug in recent builds.
Comment 5 Sébastien LeBlanc 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)
Comment 6 Jon Lee 2017-01-17 18:27:21 PST 
I do see the snap in the drop shadow. I'm on a retina iMac.
Comment 7 Sébastien LeBlanc 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.
Comment 8 Simon Fraser (smfr) 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.
Comment 9 Sébastien LeBlanc 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