做-webkit-filter：灰度（100％）；导致错误？

Question

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

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

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

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

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

1. 我确信，持续的变化意味着：
   • 某事物处于状态 a，
   • 您将其悬停，它会进入状态 b 并保持在状态 b
   • 或者当您再次将其悬停时转到状态 c，

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

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

之前：

后

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

上下文菜单是一个 div。它通过 jQuery 的
3. 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=zh-CN