Chrome animation bug? - html

Question

JSFiddle.
This is the HTML:
<div class='slide-show'>
<div class='single-slide'>
<img src='http://res2.windows.microsoft.com/resbox/en/windows/main/b865a018-7479-47d2-b80c-2ec8fd85c0c8_4.jpg' alt=''>
<div class='content'>
<div class='title'>Lorem ipsum</div>
<div class='description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam dolor, fermentum quis orci laoreet, efficitur sodales libero. Duis accumsan malesuada risus quis pretium.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/1a212f38-ae12-4052-b462-d452be7f7de9_4.jpg' alt=''>
<div class='content'>
<div class='title'>Vestibulum porta neque</div>
<div class='description'>Vestibulum porta neque dui, sed varius massa dignissim id. Vestibulum congue gravida urna ac egestas. Sed urna lectus, condimentum at nisi et, vestibulum porttitor enim. Morbi ex felis, malesuada quis eleifend sed, consequat in velit. Nunc lacinia nec erat ut efficitur.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res2.windows.microsoft.com/resbox/en/windows/main/d47c2741-a8d8-4d78-888b-93b54e6d0be2_4.jpg' alt=''>
<div class='content'>
<div class='title'>Pellentesque habitant</div>
<div class='description'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nisi magna, vehicula nec velit vel, porttitor ullamcorper sem. Donec porttitor ipsum sit amet convallis ornare. Ut vitae eros ante. </div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/6393c5ce-2ac6-4480-9446-7cb3c5aaafff_4.jpg' alt=''>
<div class='content'>
<div class='title'>Phasellus ac aliquam lectus</div>
<div class='description'>Phasellus ac aliquam lectus, eget posuere odio. Morbi et mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/d85b86ab-92ad-4615-97e7-10836d36c350_4.jpg' alt=''>
<div class='content'>
<div class='title'>Aliquam eget lorem</div>
<div class='description'>Aliquam eget lorem ac justo tempor tempor at ut dolor. Vivamus pharetra cursus ex nec rutrum. Ut euismod justo urna, id feugiat dui lobortis sagittis. </div>
</div>
</div>
</div>
and this is the CSS:
.slide-show {
position: relative;
width: 480px;
height: 300px;
}
.single-slide {
position: absolute;
width: 100%;
height: 100%;
}
.single-slide img {
position: absolute;
width: 100%;
height: 100%;
}
.single-slide .title,
.single-slide .description {
box-sizing: border-box;
-webkit-box-sizing: border-box;
background-color: white;
background-color: rgba(255, 255, 255, 0.6);
color: black;
mix-blend-mode: luminosity;
font-family: serif;
font-size: 1.2em;
width: 100%;
padding: 0.5em 1em;
}
.single-slide .description {
height: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 1em;
transition: 0.2s linear;
-webkit-transition: 0.2s linear;
overflow: hidden;
}
.slide-show .content {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.slide-show:hover .description {
height: auto;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.slide-show:hover .single-slide {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.slide-show .single-slide {
animation: slideshow 10s infinite running;
-webkit-animation: slideshow 10s infinite running;
}
.slide-show .single-slide:nth-child(1) {
animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.slide-show .single-slide:nth-child(2) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.slide-show .single-slide:nth-child(3) {
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.slide-show .single-slide:nth-child(4) {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.slide-show .single-slide:nth-child(5) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#keyframes slideshow {
5%, 20% {
opacity: 1;
}
0%,
25%,
100% {
opacity: 0;
}
}
#-webkit-keyframes slideshow {
5%, 20% {
opacity: 1;
}
0%,
25%,
100% {
opacity: 0;
}
}
The code works fine in Firefox(Version 42.0 on Ubuntu 14.04 LTS 64-bit), but it looks weird in Chrome (Version 47.0.2526.73 (64-bit)). The animation only does one loop (10s), then disappears. When I hover over it, it shows up again, then disappears again after 2s.
How can I fix my code?

Answer 1

This issue is related to the mix-blend-mode property. It seems like Chrome doesn't fully like it, and it fails (maybe a bug?) when it processes it (even when according to caniuse.com it is supported in Chrome).
If you remove it, the animation works fine both in Chrome and Firefox. You can see it on this demo (and on your JSFiddle):
/* no script fallback
** make the picture slide internally
** but the user can't control them
*/
.slide-show {
position: relative;
width: 480px;
height: 300px;
}
.single-slide {
position: absolute;
width: 100%;
height: 100%;
}
.single-slide img {
position: absolute;
width: 100%;
height: 100%;
}
.single-slide .title, .single-slide .description {
box-sizing: border-box;
-webkit-box-sizing: border-box;
background-color: white;
background-color: rgba(255, 255, 255, 0.6);
color: black;
font-family: serif;
font-size: 1.2em;
width: 100%;
padding: 0.5em 1em;
/*mix-blend-mode: luminosity;*/
}
.single-slide .description {
height: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 1em;
transition: 0.2s linear;
-webkit-transition: 0.2s linear;
overflow: hidden;
}
.slide-show .content {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.slide-show:hover .description {
height: auto;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.slide-show:hover .single-slide {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.slide-show .single-slide {
animation: slideshow 10s infinite running;
-webkit-animation: slideshow 10s infinite running;
}
.slide-show .single-slide:nth-child(1) {
animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.slide-show .single-slide:nth-child(2) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.slide-show .single-slide:nth-child(3) {
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.slide-show .single-slide:nth-child(4) {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.slide-show .single-slide:nth-child(5) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#keyframes slideshow {
5%, 20% {
opacity:1;
}
0%, 25%, 100% {
opacity:0;
}
}
#-webkit-keyframes slideshow {
5%, 20% {
opacity:1;
}
0%, 25%, 100% {
opacity:0;
}
}
<div class='slide-show'>
<div class='single-slide'>
<img src='http://res2.windows.microsoft.com/resbox/en/windows/main/b865a018-7479-47d2-b80c-2ec8fd85c0c8_4.jpg' alt=''>
<div class='content'>
<div class='title'>Lorem ipsum</div>
<div class='description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam dolor, fermentum quis orci laoreet, efficitur sodales libero. Duis accumsan malesuada risus quis pretium.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/1a212f38-ae12-4052-b462-d452be7f7de9_4.jpg' alt=''>
<div class='content'>
<div class='title'>Vestibulum porta neque</div>
<div class='description'>Vestibulum porta neque dui, sed varius massa dignissim id. Vestibulum congue gravida urna ac egestas. Sed urna lectus, condimentum at nisi et, vestibulum porttitor enim. Morbi ex felis, malesuada quis eleifend sed, consequat in velit. Nunc lacinia nec erat ut efficitur.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res2.windows.microsoft.com/resbox/en/windows/main/d47c2741-a8d8-4d78-888b-93b54e6d0be2_4.jpg' alt=''>
<div class='content'>
<div class='title'>Pellentesque habitant</div>
<div class='description'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nisi magna, vehicula nec velit vel, porttitor ullamcorper sem. Donec porttitor ipsum sit amet convallis ornare. Ut vitae eros ante. </div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/6393c5ce-2ac6-4480-9446-7cb3c5aaafff_4.jpg' alt=''>
<div class='content'>
<div class='title'>Phasellus ac aliquam lectus</div>
<div class='description'>Phasellus ac aliquam lectus, eget posuere odio. Morbi et mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>
</div>
<div class='single-slide'>
<img src='http://res1.windows.microsoft.com/resbox/en/windows/main/d85b86ab-92ad-4615-97e7-10836d36c350_4.jpg' alt=''>
<div class='content'>
<div class='title'>Aliquam eget lorem</div>
<div class='description'>Aliquam eget lorem ac justo tempor tempor at ut dolor. Vivamus pharetra cursus ex nec rutrum. Ut euismod justo urna, id feugiat dui lobortis sagittis. </div>
</div>
</div>
</div>

Answer 2

It's missing the others syntaxes like:
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
and
animation: slideshow 10s infinite running;
-webkit-animation: slideshow 10s infinite running;
-moz-animation: slideshow 10s infinite running;
-o-animation: slideshow 10s infinite running;