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.
Can you please provide a link to a URL that we can use to reproduce the problem.
I can't reproduce the bug in recent builds.
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)
I do see the snap in the drop shadow. I'm on a retina iMac.
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.
Ah, the snap. That's because of a disagreement between CA's shadow radius, and our software code path.
Created attachment 300867 [details]
Exemple of the bug in latest webkit build
The bug is still present in the latest webkit build