Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
quicksheep opened this issue Nov 1, 2017 · 1 comment
Open

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

quicksheep opened this issue Nov 1, 2017 · 1 comment

Comments

@quicksheep
Copy link

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
Copy link

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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants