does -webkit-filter: grayscale(100%); cause bugs?

Question

Before you start reading:

Apparently the bug has been fixed now, I'm not experiencing the error anymore in Chrome 52.0.2743.82 and presumably also in earlier versions

Original question

I'm creating a extension for chrome and I made a context menu which has a few options:

Technically it works fine, the problem is, that every entry of the menu has an icon assigned to it, styled with css. Normally the icons are grey until they are hovered. This has worked fine for a long time and since yesterday it's broken and I dont know what I've changed that could have caused this.

The status now is, that when I'm opening the menu (happens via jQuery, it's just a div which is hidden most of the time), all icons are invisible until I hover them. So if I move my mouse over "Call" now, it looks like this:

When I unhover it, the icon stays visible and looks like its supposed to. So basically I can show all of the icons when I hover them once.

Now there are three things which are giving me a complete brainfuck:

1. I'm sure, persistent changes, means:

   • something is in state a,
   • you hover it and it gets into state b and stays in state b
   • or goes to state c when you unhover it again,

   are impossible in CSS but thats exactly whats happening here and

2. When I open the chrome developer tools and change anything in the CSS settings

   Before: After

   Every icon is displayed correctly (not in case of the changed CSS property of course but it stays visible when you turn it back on). It's completely irrelevant which of the css properties you change, whenever you change it, the images pop up.

3. The context menu is a div. It gets hidden and shown through jQuerys slideUp and slideDown functions so it never gets reset, just hidden and shown from time to time. Now when I hover all of the icons to make them visible, close the menu (clicking somewhere otuside it) and open it again, the icons are invisible.

Now I experimented with the CSS properties in my CSS file and I found the following. My icons are grayscaled when they're not hovered. In CSS it looks like this

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

Now when I comment out -webkit-filter: grayscale(100%);, the icons are not grayed out of course, but they show up like they should.

So how the f does this work?

Answer 1

Try this to force a graphics redraw:

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

This way everything has to be recomputed and redrawn and should be nigh invisible to detect for the end user. If that works you can try to add it in the in the css styles to force a redraw between the styles to avoid the javascript overhead/surplus code.

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

The problem is that those filters get cached by graphics hardware draws, and aparently some bufferes are cached somewhere instead of recalculated on update.

It's probaly a bug, and it would be good to report it as a bug

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