performance - 使用 SVG 阴影过滤器的 CSS 动画性能问题

Question

我有这个;

http://codepen.io/tacrossman/pen/JDxcf

如果没有这部分 CSS（第 78 行），它可以正常工作；

svg {
-webkit-filter: drop-shadow( 1px 1px 5px #000 );
}

但是，当它存在时，磁贴的 :hover 状态上的动画会出现严重的性能问题（抖动）。

这是性能的已知问题还是我错误地应用了阴影？我曾尝试将它专门放在每个 SVG 上，但也无济于事。

任何帮助表示赞赏，

谢谢！

Answer 1

投影本质上只是一个非常昂贵的过滤器。使用 box-shadow 或图像，以便阴影的像素只绘制一次。