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: Macintosh 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

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