Question

开始阅读之前：

显然此错误现已修复，我在Chrome 52.0.2743.82中没有遇到错误，大概也是在早期版本中

原始问题

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

从技术上讲它工作正常，问题是，菜单的每个条目都有一个分配给它的图标，用css设置样式。通常情况下，图标是灰色的，直到它们悬停。这已经很好地工作了很长一段时间，从昨天它已经破了，我不知道我改变了什么可能导致这一点。

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

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

现在有三件事给了我一个完整的脑袋：

我确定，持续的变化意味着：
- 某事处于状态a，
- 你将它悬停并进入状态b并保持状态b
- 或当你再次取消它时进入状态c，
在CSS中是不可能的，但那确实发生在这里和
当我打开Chrome开发者工具并在CSS设置中更改任何时

在：后

每个图标都正确显示（当然不是在更改的CSS属性的情况下，但是当您重新打开它时它仍然可见）。与您更改的css属性完全无关，无论何时更改它，图像都会弹出。
上下文菜单是div。它通过jQuerys slideUp和slideDown函数隐藏和显示，因此它永远不会被重置，只是隐藏并不时显示。现在，当我将所有图标悬停以使其可见时，关闭菜单（单击某处otuside）并再次打开它，图标是不可见的。

现在我在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

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

1 个答案: