fa -webkit-filter: scala di grigi (100%); causare bug?

Question

Prima di iniziare a leggere:

A quanto pare il bug è stato corretto ora, non sto sperimentando l'errore più in Chrome 52.0.2743.82 e presumibilmente anche nelle versioni precedenti

domanda originale

sto creando un estensione per Chrome e ho fatto un menu contestuale, che ha alcune opzioni:

Tecnicamente funziona, il problema è che ad ogni voce del menu è assegnata un'icona, in stile css. Normalmente le icone sono grigie fino a quando non si librano. Questo ha funzionato bene per molto tempo e da ieri è rotto e non so cosa ho cambiato che potrebbe aver causato questo.

Lo stato ora è che quando apro il menu (succede tramite jQuery, è solo un div che è nascosto la maggior parte del tempo), tutte le icone sono invisibili finché non le alzo. Quindi, se muovo il mouse sopra "Chiama" ora, sembra che questo:

Quando ho unhover esso, l'icona rimane visibile e si presenta come il relativo presunto. Quindi in pratica posso mostrare tutte le icone quando le alzo con il mouse una volta.

Ora ci sono tre cose che mi stanno dando una brainfuck completo:

1. ne sono sicuro, i cambiamenti persistenti, significa:

   • qualcosa è in stato di un,
   • voi passa sopra e passa allo stato b e rimane nello stato b
   • o passa allo stato c quando lo rilevi di nuovo,

   sono impossibili in CSS, ma questo è esattamente quello che accade qui e

2. Quando apro gli strumenti di Chrome per sviluppatori e cambio nulla nelle impostazioni CSS

   Prima: Dopo

   Ogni icona viene visualizzata correttamente (non nel caso della proprietà CSS modificata, ma rimane visibile quando la si riattiva). È del tutto irrilevante quale delle proprietà del css cambi, ogni volta che lo cambi, le immagini appaiono.

3. Il menu di scelta rapida è un div. Viene nascosto e mostrato attraverso le funzioni jQuerys slideUp e slideDown in modo che non venga mai ripristinato, solo nascosto e visualizzato di volta in volta. Ora quando tengo il mouse su tutte le icone per renderle visibili, chiudi il menu (facendo clic da qualche parte qui sopra) e apri di nuovo, le icone sono invisibili.

Ora ho sperimentato le proprietà CSS nel mio file CSS e ho trovato quanto segue. Le mie icone sono grigie quando non sono aleggiate. In CSS sembra che questo

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

Ora, quando io commento -webkit-filter: grayscale(100%);, le icone non sono visualizzate in grigio, naturalmente, ma si rivela come dovrebbero.

Quindi come funziona il f?

Answer 1

Prova questo per forzare una grafica ridisegnare:

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

In questo modo tutto deve essere ricalcolato e ridisegnato e dovrebbe essere quasi invisibile per rilevare per l'utente finale. Se funziona, puoi provare ad aggiungerlo negli stili CSS per forzare il ridisegno tra gli stili per evitare il codice overhead/surplus di 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"); 

Il problema è che questi filtri vengono memorizzate nella cache da una grafica hardware attinge, e che verrà aggiustata alcuni bufferes vengono memorizzati nella cache da qualche parte, invece di ricalcolate in aggiornamento.

E 'esaltante un bug, e sarebbe bene segnalare come bug

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