CSS过滤器在不同顺序的Safari上非常慢，有人可以解释吗？答案

【问题标题】：CSS filter is very slow on Safari with different order, can someone explain?CSS过滤器在不同顺序的Safari上非常慢，有人可以解释吗？
【发布时间】：2017-11-23 13:12:15
【问题描述】：

似乎filter: none; 的位置/顺序在 Safari（速度）中产生了巨大的差异。有人可以对发生的事情提供一个可靠的解释吗？

仅在 Safari 中检查以下两个示例

示例 1：（filter: none; 在 CSS 规则的末尾，它在 Safari 上非常慢）

Example 1 (Slow on safari)

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none; /* IE 6-9 */
}

示例 2：（将 filter: none; 移到其他浏览器特定的过滤器上方使其更快）

Example 2 (Much faster)

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  filter: none; /* IE 6-9 */
  -webkit-filter: grayscale(0%);
}

我在网上搜索了试图找到解释但没有运气？

我有我的猜测，但据我所知，如果看到像 filter: none; 这样的 CSS 并不会停止检查其他规则？

【问题讨论】：

告诉我这是如何在 Safari 上工作的：codepen.io/anon/pen/pwPWzP
我还临时删除了我的答案，因为我想知道上述内容在 Safari 中是如何工作的。正如我在评论中所写，使用 filter: none 的 hover 规则很可能不是问题，而是 filter: gray 在 Safari 上导致此问题
@LGS关于你发布的codepen，在Safari上真的很慢，与示例1基本相同。
好的，这个是如何工作的：codepen.io/anon/pen/Ogmagz
不相关但为什么你有这么多前缀呢？ -moz-filter 和 -o-filter 甚至都不存在，而且 -ms-filter 是一种不同类型的过滤器，与标准无关，使得 -ms-filter: grayscale(0%) 同样没有意义。

标签： css safari css-filters

【解决方案1】：

您的主要问题是您实现filter: none; 的方式（或者，您删除先前设置的灰度过滤器的方式）。你说得对：

据我所知，CSS 不会停止检查其他规则，如果看起来像过滤器：无；？

但这正是问题所在！似乎将过滤器设置为无比简单地将灰度更改回0%!

我在 Dudley Storey 所著的Pro CSS3 Animation一书中找到了一句话证实了这个假设：

“请注意，您无法顺利过渡到“无”或未应用过滤器的状态；必须为过滤器赋予一个新值”(Storey, 113)

因此，在示例 1 中，Safari 正在读取 CSS，并且基本上留下了移除所有过滤器而不是设置仅灰度过滤器为0% 的劳动密集型任务。在示例 2 中，Safari 最后看到 -webkit-filter: grayscale(0%);，这意味着它是它执行的 CSS（并且更容易执行）。

虽然我认为这回答了问题，但我希望更多有经验的人分享他们的意见。我自己不太满意，因为有人告诉我，约定是将“通用”CSS 标签放在您自己的标签之前（将 -webkit、-moz 放在其他 CSS 之前），以及我在 Apple 上找到的唯一信息Safari 文档是一个模糊的警告：

滤镜是可以应用于图像和其他内容的视觉效果 HTML 元素... 这些过滤器是资源密集型的。使用它们谨慎且仅在必要时。请务必在大量的计算机和设备断言渲染性能不会受到阻碍，尤其是在制作动画时。 Source

最简单的（似乎也是最符合惯例的）是完全删除filter:none;，因为如果您要删除的唯一过滤器是灰度，那么它是多余的并且坦率地说是不必要的。

我希望它有所帮助，并且答案是连贯的。对我来说有点晚了，请原谅我的任何错误！

【讨论】：

【解决方案2】：

在带有模糊的元素上使用 CSS 属性

transform: translateZ(0)

在 GPU 上渲染 CSS

【讨论】：