7

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?

invot
  • 533
  • 7
  • 30
  • Chrome 44, Win 7, fading is there for every slide – Jakub Kotrs Aug 31 '15 at 17:59
  • @JakubMichálek: Please read the question. The issue isn't the slides fading. It's that the first slide begins in color instead of grayscale. This issue exists in Safari on OSX, and Chrome 44 on Win7. Firefox seems to have fixed this since version 38 and is working in version 40. – invot Aug 31 '15 at 18:23
  • 1
    What i meant is that for me, the first slide does start grayscale and color fades in just right. I even tried turning cache off and refresh, but I always see the first slide in greyscale before it catches color. ;) – Jakub Kotrs Aug 31 '15 at 18:26
  • @JakubMichálek Very odd. I've tested this on several Windows machines and all of them fail to work with Chrome 44. Is there anything special about your install of chrome? – invot Aug 31 '15 at 19:45
  • i have a chrome with Version 44.0.2403.157 m. I am also able to see grayscale to color transition for 1st slide. Try increasing the transition delay to lets say 4s and see what effect you are getting for 1st slide. Or try with smaller images just for debugging purpose. – vijayP Sep 01 '15 at 12:15
  • I added a grey slide to the beginning of the slideshow. The client was tired of waiting for a fix :/ – invot Sep 01 '15 at 16:43
  • @vijayP I swapped out the link with a jsfiddle. – invot Sep 01 '15 at 16:54

1 Answers1

2

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.

romuleald
  • 1,406
  • 16
  • 31