Sfarfallio di transizione CSS con:: visitato in Safari, Chrome e Firefox, ma non Opera

Question

(per i browser che supportano le transizioni CSS, incluse le ultime versioni di Firefox, Safari e Chrome. Stranamente, questo problema non viene visualizzato in Opera .)

Qualcun altro ha notato questo? Quando si inserisce una transizione di colore su un collegamento:: a: le transizioni visitate al colore del collegamento a: prima di visualizzare il colore a: hover. Check it out:

http://jsfiddle.net/Mgzv9/2/

Può questo colore sfarfallio essere evitato?

Answer 1

Non l'ho mai visto mentre si utilizza il colore. Ma si verifica quando si usano le immagini nel baground. Questo è il tempo di caricamento, e può essere evitato usando tutte le immagini di transizione in una grande immagine e usare la proprietà baground-position per controllare l'immagine.

Answer 2

Sono stato sbattendo la testa su questo problema per un po '.

Il problema è che questo problema è difficile da riprodurre.

OK, quindi cosa succede, a volte durante il caricamento/aggiornamento di una pagina con transizione di colore sui collegamenti, il colore viene prima trasferito dal colore del collegamento browser predefinito al colore definito CSS. In realtà non accade per me, quando apro l'HTML dal disco, ma se lo metto in un server (anche server locale), allora questo problema si presenta.

Per riprodurre il problema, creare un HTML, aggiungere un foglio di stile e definire una transizione per i collegamenti, qualcosa di simile:

a { 
    color: red; 
    -webkit-transition: color .5s linear; 
    -moz-transition: color .5s linear; 
    -o-transition: color .5s linear; 
    -ms-transition: color .5s linear; 
    transition: color .5s linear; 
} 

a:hover { 
    color: green; 
} 

... e quindi includere il foglio di stile nel codice HTML.

Inserisci i file su un server e prova ad aprire la pagina in Chrome, prova ad aggiornare il sito, a volte dovresti prima vedere una transizione dal colore blu predefinito, quando le pagine vengono caricate.

Dopo aver decostruito alcuni siti, dove sembrava non esserci alcun problema, ho trovato questa soluzione semplice.

Se si includono anche alcuni file Javascript, il solo inserimento di Javascript include DOPO incluso nel CSS.

Funziona anche se si include solo un file JS vuoto, dopo il foglio di stile.

Spero che questo aiuti!