Weird transition bug using fade transition

[olach]

So I have this weird transition bug when using the fade transition. The fade transition works as expected on all images except the last one. When the last image should be fading to the first image, the fading is failing. There is a flash instead of a smooth fade.

I encountered this on a website I'm building, and it took me some time to locate the cause. The bug seems to only occur if there is a wrapping div with a background color set. Did I say it was a weird bug?

To illustrate I cloned your Codepen with the simple fade transition: http://codepen.io/peduarte/pen/RWbORJ

And just added a wrapping div with a background color: http://codepen.io/olach/pen/OyyYVE

If you try my forked version (tested in Safari and Chrome) you should see the transition bug when the last image is fading to the first.

I have no idea why this is happening. I have tried some workarounds with css but with no luck.

Do you have any idea?

[olach]

I figured out it was a z-index issue. A z-index of -1 is used, which places the item to be behind the background. The solution is to change these lines:

https://github.com/peduarte/wallop/blob/master/css/wallop--fade.css#L23-L25

And replace it with this code:

.Wallop--fade .Wallop-item {
  z-index: 2;
}

.Wallop--fade .Wallop-item--hideNext {
  z-index: 1;
}

[peduarte]

Hi,

wow. that's very weird indeed.

I've updated the fade.css file with a fix.

Thanks.

[peduarte]

@olach did that fix it for you?

[olach]

Yes, that did solve the issue. Thanks!