-webkit-filter：グレースケール（100％）;バグを引き起こす？

Question

あなたは読書を開始する前に：

はどうやらバグが修正されましたが、私は以前のバージョンでは、おそらくもクローム52.0.2743.82にもはやエラーを経験していないよ

オリジナル質問

私はChromeの拡張機能を作成していると私はいくつかのオプションを持っているコンテキストメニューを作っ：

技術的には問題ありません。問題は、メニューのすべての項目にCSSが付いたアイコンが割り当てられていることです。通常、アイコンは、吊るされるまで灰色です。これは長い間うまく働いていて、昨日から壊れていて、これを引き起こした可能性がある変更点を知りません。

ステータスは、（jQuery経由で起こる、それはほとんどの時間隠されたdivです）、私がそれらをホバーするまで、すべてのアイコンが見えなくなります。だから私は私の上にマウスを移動する場合は、「コール」今、それは次のようになります。

は、私はそれをunhoverすると、アイコンが表示されたまま、そのになってのように見えます。だから、基本的に私は一度ホバーするとすべてのアイコンを表示することができます。

今私の完全なbrainfuck与えている三つのことがあります：私は確信して、永続的な変更をしてい

1. を、意味：

   • 何かが状態にある、
   • ますそれをホバーすると状態bになり、状態bに留まります。
   • また、再度移動すると状態Cになります。

   は、CSSでは不可能ですが、ここで起こっといただきました正確にthatsの

2. 私はChromeデベロッパーツールを開き、CSSの設定で何を変更

   前：

   後

   すべてのアイコンが正しく表示されます（変更されたCSSプロパティの場合はもちろんですが、再度オンにすると表示されます）。どのCSSプロパティーを変更しても、変更するたびに画像がポップアップするということはまったく関係ありません。

3. コンテキストメニューはdivです。それはjQueryのslideUpとslideDownの機能によって隠されて表示されるので、リセットされることはなく、隠されて表示されることはありません。ここでアイコンをすべて表示して表示させたら、メニューを閉じて（どこかをクリックして）もう一度開くとアイコンが見えなくなります。

私はCSSファイルのCSSプロパティを実験しましたが、次のことがわかりました。私のアイコンは、ホバーされていないときグレースケールされています。 CSSでは、それは私が-webkit-filter: grayscale(100%);をコメントアウトする場合さて、アイコンはもちろんのグレー表示されていないこの

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

のように見えますが、彼らがすべきのように彼らが現れます。

これはどのように機能するのですか？

Answer 1

グラフィックスの再描画を強制するために、これを試してみてください：

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

この方法のすべてが再計算して再描画する必要があり、エンドユーザーのために検出する目に見えない近付いでなければなりません。それが動作する場合は、JavaScriptのオーバーヘッド/余分なコードを避けるためにスタイル間で再描画を強制的にCSSスタイルで追加しようとすることができます。

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

問題は、これらのフィルタは、グラフィックスハードウェアで描画し、キャッシュされます、そしてaparently一部bufferesがどこかにキャッシュされた代わりの更新時に再計算されていることです。

それはprobalyバグだし、私がグレースケール画像の多くを使用してページでも、この問題を見て、効果をホバーしていますバグ

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