Fading between slides exposes element background

[jancbeck]

I'm using slick to fade between two very similar product images set on a distinct background. During the transition between the product images one can see the background.

http://jsfiddle.net/rqfdeagj/7/

Steps to reproduce the problem

1. Set fade: true and cssEase: 'linear'
2. Apply background to slider or any other parent element

What is the expected behaviour?

I'd expect that the sum of all opacity values during the fade would always amount to 1 (at least when using the 'linear' timing function). So a timeline of the fade transition: 0%: Slide A opacity: 1 / Slide B opacity: 0 50%: Slide A opacity: 0.5 / Slide B opacity: 0.5 100%: Slide A opacity: 0 / Slide B opacity: 0

What is observed behaviour?

It seems like at 50% of the fade transition the actual opacity of both slides combined is something like 0.9 which makes the background come through. The Jsfiddle makes this very apparent as the background is red and the slides are light grey. You should see a bright red flash during each transition.

[room4]

I've got the same issue. Oddly enough bug doesn't occur in demo on Slick website.

[jancbeck]

The bug does occur on the Slick website if you use dev tools to change the background of the slider element

https://imgur.com/a/hn3Sx

[danielmcfarland]

+1

[ai-slave]

Same for me too

[dompl]

Did anyone get a solution for this?

[shaynasymons]

+1

[susanharkey]

+1

[vyskoczilova]

+1

[isaacalves]

+1

[coreyhuddleston]

+1,000,000 We love the slider and use it for our projects, but this is a visual draw back. Smooth transitions are important. This can be implemented in one of two ways:

Option 1: "next" slide could already be at 100% opacity behind the current slide, and then current slide fades out revealing the next slide. Option 2: Keep current slide at 100% opacity, and delay it's "fadeout". Have next slide's z-index higher than current slide, and fade in from 0% to 100% opacity. Then, when new slide has reached 100%, the previous slide can fade out.

[OscarMatthew]

+1

[arthurmoeller]

I think I found a CSS Fix:

.slick-slide:not(.slick-active) {
    transition-delay: 500ms !important;
}

please mind that the delay has to be the fading duration.

[elektrischerwalfisch]

The fix worked for me aswell, but for slick-slider Version 1.8 I had to modify it to:

.slick-slide:not(.slick-current) {transition-delay: 500ms !important;}

As this problem is already 3years old and quite annoying, I wonder why it still wasn´t fixed...