Il plugin di inizializzazione di Cycle2 funziona in modo diverso su Windows che su OSX

Question

Se c'è una domanda simile a questo proposito, per favore indicami in quella direzione. Questo problema è difficile per me descrivere, ma farò del mio meglio:

http://jsfiddle.net/e70r1mtw/

utenti qui sono accolti da uno slideshow di immagini in scala di grigi che sfumano dal al colore. Funziona perfettamente su OSX e su Firefox in Windows. (Il client è consapevole che questo effetto non funziona in IE e va bene.)

Tuttavia, in Chrome su Windows, la prima diapositiva non svanisce dalla scala dei grigi, ma rimane a colori.

Il mio sospetto è che questo abbia a che fare con il modo in cui viene caricato il DOM e come viene inizializzato il plugin di Cycle2.

Il CSS che controllano questo effetto in scala di grigi è la seguente:

#home-featured .cycle-slide { 
     -webkit-filter: grayscale(100%); 
     filter: grayscale(100%); 
     -webkit-transition-property: -webkit-filter; 
     -webkit-transition-duration: 4s; 
     -webkit-transition-timing-function: ease; 
     -webkit-transition-delay: 2s; 
     transition-property: -webkit-filter, filter; 
     transition-duration: 4s; 
     transition-timing-function: ease; 
     transition-delay: 2s; 
    } 

    #home-featured .cycle-slide-active { 
     -webkit-filter: grayscale(0%); 
     filter: grayscale(0%); 
    } 

La mia domanda è: C'è un modo per inizializzare Cycle2 senza aggiungere immediatamente la classe cycle-slide-active, dando il tempo browser per rendersi conto che ha bisogno di mettere in atto la transizione CSS?

Answer 1

ho già avuto un problema simile con cycle2 Cambiare il .cycle-slide-active a:

body.loaded .cycle-slide-active { 
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%); 
} 

Così l'effetto sarà il carico di documenti, dopo cycle2 che si trova sul pronto con l'init automatica.

Il carico documento

$('body').addClass('loaded'); 

Esempio: http://jsfiddle.net/e70r1mtw/3/

È inoltre possibile utilizzare il cycle-initializedevent per aggiungere una classe ovunque si desidera attivare le transizioni.