ChromeのアニメーションGIFの背景画像が再生されない - 背景サイズ

Question

アニメーションgifのサムネイルボタンを背景画像として表示しようとしています。しかし、クロムでのみ、GIFはループされていません。

FFとEdgeは正常に動作していますか？

chrome開発ツールで背景サイズで再生するとき、gifは特定の％でループを開始します。

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

私は、問題を表示するためにjsfiddleを作成しました。

バックグラウンドサイズが異なる2つめのサムネイルを作成すると、サムネイルは両方ともルーピングgif！???

誰でも知っていますか？ CSSに問題がありますか？またはこれはChromeのバグですか？

Answer 1

次のコードを使用して同じことを達成できます。クロム、FFとIE

でその作業罰金

CSS

.thumbnail { 
    background-position: -12px -14px; 
    background-size: 150%; 
    background-color: rgb(250, 252, 252); 
    border-radius: 50%; 
    border: 2px solid rgb(116, 200, 184); 
    box-sizing: border-box; 
    color: rgb(83, 181, 161); 
    cursor: auto; 
    display: block; 
    filter: none; 
    font-family: Ubuntu, sans-serif; 
    font-size: 14px; 
    height: 142px; 
    line-height: 20px; 
    margin: 12px; 
    max-width: 100%; 
    opacity: 0.5; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    padding: 5px; 
    position: relative; 
    width: 142px; 
} 

HTML：

<span><img class="thumbnail" src="https://media.giphy.com/media/xTiTnxd70rHICWIQSs/giphy.gif"></span> 

これを試してみてください：この特定のケースでhttps://jsfiddle.net/hL2boada/11/

Answer 2

を以下の修正バグ：

background-position: center; 

数日前にChromeで背景GIFが動作しなくなったとき、同様の問題に直面して以来、Chromeの問題があるようです。

this releaseでバックグラウンドレンダリングに関して多くの変更を加えたようです。