mix-blend-mode on img elements breaks transitions on Chrome

[quicksheep]

Adding any "mix-blend-mode" style to ".rslides img" causes unexpected results during the transition.

.rslides li {
background-color: red;
}
.rslides img {
mix-blend-mode: multiply;
}

Expected behavior: Images would be multiplied on top of the red background, and transition would be smooth.

Actual behavior: First image is correctly multiplied on top of the red background color when the page loads, and it fades out correctly, but the next image does not fade in correctly and remains is invisible during transition. Only after the timeout completes, does it then snap into view at 100% opacity in order to begin the fade out. Each image in the slideshow results in the same behavior.

Note: adding the above styles to the first demo at http://responsiveslides.com/ using inspect element yields the above results.

This problem occurs on the most recent version of chrome, on both pc and mac running current operating systems.

[vinnydude]

Hey man, I stumbled on this trying to debug the same issue.

I used a trick that helps pixel shifting in firefox and it seems to have helped.

on the multiply element, use a transform: rotateX(0.01deg);