仅在Safari中检查以下两个示例
示例1 :(使用filter：none;在CSS规则结束时,它在Safari上非常慢)
section#pitches>div>div:hover {
opacity: 0.6;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none; /* IE 6-9 */
}
示例2 :(移动过滤器：无;高于其他浏览器特定的过滤器使其快得多)
section#pitches>div>div:hover {
opacity: 0.6;
filter: grayscale(0%);
filter: none; /* IE 6-9 */
-webkit-filter: grayscale(0%);
}
我在网上搜索试图找到解释但没有运气？
我有我的猜测,但据我所知CSS不会停止检查其他规则,如果看起来像filter：none;？
解决方法
as far as I know CSS does not STOP checking other rules if seen like
filter: none;?
但这正是问题所在！似乎将过滤器设置为none比简单地将灰度更改回0％更加耗费资源！
我在Dudley Storey的Pro CSS3 Animation一书中找到了一个引用,证实了这一假设：
“请注意,您无法顺利过渡到’无’状态或未应用过滤器;必须为过滤器指定新值”(Storey,113)
因此,在示例1中,Safari正在读取CSS并且基本上留下了更加劳动密集的删除所有过滤器的壮举,而不是仅将灰度过滤器设置为0％.在示例2中,Safari看到-webkit-filter：灰度(0％);最后,这意味着它是它执行的CSS(并且更容易做到).
虽然我认为这回答了这个问题,但我希望更有经验的人分享他们的意见.我自己并不是很满意,因为我被告知惯例是将“通用”CSS标签放在你自己之前(把-webkit,-moz放到其他CSS之前),以及我在Apple Safari文档中找到的唯一信息是一个模糊的警告：
Filters are visual effects that can be applied to images and other
HTML elements… These filters are resource-intensive. Use them
sparingly and only when necessary. Be sure to test your content on a
multitude of computers and devices to assert that rendering
performance is not hampered,especially if animating. 07001
最简单的(也是最符合惯例的)就是简单地删除filter：none;完全,因为它是多余的,如果您要删除的唯一过滤器是灰度,则坦率地说是不必要的.
我希望它有所帮助,答案是连贯的.这对我来说有点晚了,所以请原谅我有任何错误！
