-webkit-filter: 灰度（100%）；导致错误？

Question

开始阅读之前：

显然该错误现已修复，我在 Chrome 52.0.2743.82 中不再遇到该错误，并且可能在早期版本中也是如此

原始问题

我正在为 chrome 创建一个扩展程序，并创建了一个上下文菜单，其中有几个选项：

从技术上讲，它工作得很好，问题是，菜单的每个条目都有一个分配给它的图标，用 css 设置样式。通常，图标在悬停之前是灰色的。这已经运行了很长时间，但从昨天开始它就坏了，我不知道我做了什么改变可能会导致这种情况。

现在的状态是，当我打开菜单（通过 jQuery 发生，它只是一个大部分时间隐藏的 div）时，所有图标都是不可见的，直到我将它们悬停。因此，如果我现在将鼠标移到“呼叫”上，它看起来像这样：

当我将其悬停时，该图标保持可见并且看起来像它应该的那样。所以基本上我可以在鼠标悬停一次时显示所有图标。

现在有三件事让我彻底傻了眼：

1. 我敢肯定，持续变化意味着：

   • 某事处于状态 a，
   • 你悬停它，它进入状态 b 并停留在状态 b
   • 或再次悬停时进入状态 c，

   在 CSS 中是不可能的，但这正是这里发生的事情

2. 当我打开 chrome 开发者工具并在 CSS 设置中更改任何内容时

   之前： 后

   每个图标都正确显示（当然不是在更改 CSS 属性的情况下，但当您重新打开它时它仍然可见）。更改哪个css属性完全无关紧要，无论何时更改，图像都会弹出。

3. 上下文菜单是一个 div。它通过 jQuerys slideUp 和 slideDown 函数被隐藏和显示，因此它永远不会被重置，只是不时隐藏和显示。现在，当我将所有图标悬停以使它们可见时，关闭菜单（单击它之外的某个地方）并再次打开它，图标是不可见的。

现在我尝试了我的 CSS 文件中的 CSS 属性，我发现了以下内容。我的图标在没有悬停时是灰度的。在 CSS 中它看起来像这样

-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

现在，当我注释掉 -webkit-filter: grayscale(100%); 时，图标当然不会变灰，但它们会按应有的方式显示。

那么 f 是如何工作的呢？

Answer 1

试试这个来强制重绘图形：

$(el).css("opacity", .99);
setTimeout(function(){
   $(el).css("opacity", 1);
},20);

这样，所有内容都必须重新计算和重新绘制，并且几乎不可见，最终用户无法检测到。如果可行，您可以尝试将其添加到 css 样式中以强制在样式之间重绘以避免 javascript 开销/多余代码。

-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
opacity: 0.99;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

问题在于这些过滤器会被图形硬件绘制缓存，并且显然某些缓冲区被缓存在某处，而不是在更新时重新计算。

这可能是一个错误，最好将其报告为错误

https://support.google.com/chrome/answer/95315?hl=en