Javascript does-webkit过滤器：灰度（100%）；引起虫子？

开始阅读前：

显然这个错误现在已经被修复了，我不再在Chrome 52.0.2743.82和早期版本中遇到这个错误了

原始问题

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

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

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

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

现在有三件事让我头脑发热：

我相信，持续的变化意味着：

• 有些东西处于a状态
• 你将它悬停，它进入状态b并停留在状态b
• 或者当你再次打开它时进入c状态

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

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

之前： 之后

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

上下文菜单是一个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过滤器：灰度（100%）；
滤镜：灰度（100%）；
过滤器：灰色；
过滤器：url（“数据：image/svg+xml；utf8，#灰度”）；

现在当我注释掉

-webkit过滤器时：灰度（100%），图标当然不会变灰，但它们会按应有的方式显示

那么f是如何工作的呢？
尝试以下方法来强制重新绘制图形：

$(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");

-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
过滤器：灰色；
不透明度：0.99；
过滤器：url（“数据：image/svg+xml；utf8，#灰度”）；

问题是这些过滤器被图形硬件绘制缓存，一些缓冲区被缓存在某个地方，而不是在更新时重新计算

这很可能是一个bug，最好报告为bug

我在一个使用大量灰度图像和悬停效果的页面上也看到了这个问题。即使切换标签也能纠正这一问题。这看起来像是某种Chrome渲染错误。听起来你可以在显示之前切换一个影响css的布局道具来掩盖错误，直到它得到修复。这些年来，我不得不使用很多类似的技巧，尤其是在chrome上。嗨，Tom，试着用jQuery来实现这个效果。我不得不与很多Google Chrome bug作斗争，特别是CSS，这就是为什么我真的不喜欢这个不完整的浏览器。Kk，在不久的将来会有任何修复吗？我注意到WebKit/Blink过滤器也有类似的问题，这似乎是过度优化的结果。通常，这些类型的错误会在删除供应商前缀时修复。