Chrome动画GIF背景图像没有播放 - 背景大小

我试图显示带有动画GIF作为背景图像的缩略图按钮。但只有在铬，gif不循环。Chrome动画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，借以说明问题。

如果您使用不同的背景大小创建第二个缩略图，那么这两个缩略图都有一个循环gif！

有谁知道为什么？有没有问题的CSS？或者这是Chrome中的错误？

来源

2016-09-23 Tom Van Rossom

这似乎很好，如果你删除背景 - **位置**改变。然后再次，如果位置变化是在％而不是px，再次，这很好 - https://jsfiddle.net/hL2boada/12/ –

https://jsfiddle.net/hL2boada/14/ –

还有一个问题当仅使用'％'时！ :(https://jsfiddle.net/tomvanrossom/hL2boada/15/ –

您可以使用以下代码实现相同的功能。在Chrome，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/

来源

2016-09-23 11:33:17

在你的小提琴背景不是一个动画gif ... – Luciano

在这种特殊情况下修复的bug：

background-position: center;

几天前，当背景GIF停止在Chrome中工作时，我面临类似的问题，这似乎是Chrome的问题。

看起来他们已经在this release中对背景渲染进行了很多更改。

来源

2016-09-30 10:06:11 Lunokhod

Chrome动画GIF背景图像没有播放 - 背景大小

回答

相关问题