Chrome animated gif background-image not playing - background-size

Question

I'm trying to display a thumbnail button with an animated gif as background image. But only in chrome, the gif is not looped.

FF and Edge are working fine?!

When playing with the background-size in chrome dev tools, the gif start looping at a certain %.

HTML

<span class="thumbnail"></span>

CSS

.thumbnail {
    background-position: -12px -14px;
    background-size: 150%;
    background-color: rgb(250, 252, 252);
    background-image: url(https://media.giphy.com/media/xTiTnxd70rHICWIQSs/giphy.gif);
    ...
}

I've created a jsfiddle to show the problem.

If you create a second thumbnail, with a different background-size, both the thumbnails have a looping gif!???

Does anyone know why? Is there something wrong with the css? Or is this a bug in Chrome?

Answer 1

In this particular case the following fixes the bug:

background-position: center;

It seems to be the Chrome issue since I faced the similar problem when background GIF's stopped working in Chrome a few days ago.

It looks like they have made a lot of changes regarding background rendering in this release.