The Initialization of Cycle2 plugin works differently on Windows than on OSX

Question

If there's a similar question out there about this, please point me in that direction. This issue is hard for me to describe but I will try my best:

http://jsfiddle.net/e70r1mtw/

Users here are greeted by a slideshow of images that fade from greyscale to color. This works just fine on OSX and on Firefox in Windows. (The client is aware that this effect doesn't work in IE and is okay with that.)

However, in Chrome on Windows, the first slide does not fade from greyscale, but stays color.

My suspicion is that this has to do with how the DOM is being loaded and how the Cycle2 plugin is being initialized.

The CSS that control this greyscale effect is as follows:

   #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%);
  }

My question is: Is there a way to initialize Cycle2 without adding the cycle-slide-active class immediately, giving the browser time to realize it needs to enact the CSS transition?

Answer 1

I already had a similar problem with cycle2 Change the .cycle-slide-active to:

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

So the effect will be on document load, after cycle2 that is on ready with the auto init.

On document load

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

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

You can also use the cycle-initialized event to add a class anywhere you want to activate the transitions.