Делает -webkit-filter: оттенки серого (100%); вызывают ошибки? ⇐ CSS

[Гость]

Я создаю расширение для Chrome и контекстное меню с несколькими опциями:





Технически это работает нормально, проблема в том, что каждому пункту меню присвоен значок, оформленный с помощью CSS. Обычно значки серые, пока на них не наведен курсор. Это работало нормально в течение долгого времени, а со вчерашнего дня оно сломалось, и я не знаю, что я изменил, что могло вызвать это.

Сейчас ситуация такова: когда я открываю меню (происходит через jQuery, это просто элемент управления, который большую часть времени скрыт), все значки невидимы, пока я не наведу на них курсор. Итак, если я сейчас наведу указатель мыши на «Вызов», это будет выглядеть так:





Когда я нажимаю на него, значок остается видимым и выглядит так, как и должно быть. Таким образом, я могу показать все значки, если навести на них один раз.

Теперь есть три вещи, которые выводят меня из себя:
[*]Я уверен, постоянные изменения означают: что-то находится в состоянии a, [*]вы наводите на него курсор, и он переходит в состояние b и остается в состоянии b. [*]или переходит в состояние c, когда вы снова наводите на него курсор,
невозможны в CSS, но здесь и происходит именно это
[*]Когда я открываю инструменты разработчика Chrome и меняю что-нибудь в настройках CSS
До:

После



Каждый значок отображается правильно (конечно, не в случае изменения свойства CSS, но он остается видимым, когда вы снова включаете его). Совершенно неважно, какое из свойств CSS вы измените: всякий раз, когда вы его меняете, изображения всплывают.
[*]Контекстное меню представляет собой элемент div. Он скрывается и отображается с помощью функций jQuery slideUp и slideDown, поэтому он никогда не сбрасывается, а просто скрывается и отображается время от времени. Теперь, когда я навожу курсор на все значки, чтобы они стали видимыми, закрываю меню (щелкнув где-нибудь за его пределами) и открываю его снова, значки становятся невидимыми.
Теперь я поэкспериментировал со свойствами CSS в своем файле CSS и обнаружил следующее. Мои значки имеют оттенки серого, когда они не наведены. В CSS это выглядит так

-webkit-filter: оттенки серого (100%); фильтр: оттенки серого (100%); фильтр: серый; filter: url("data:image/svg+xml;utf8, #greyscale "); Теперь, когда я закомментирую -webkit-filter: Grayscale(100%);, значки, конечно, не становятся серыми, но отображаются так, как должны.

И как же это работает?