Fading between slides exposes element background

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.

[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.

[vyskoczilova]

+1