Question

我有一个背景大小过渡突然停止在chrome工作，我无法弄清楚原因。如果您将鼠标悬停在此页面上的某个类别框中，您可以看到我的意思：

http://demo.elusivethemes.com/luxi/

过去工作正常，但现在停止了。有什么想法吗？

谢谢，

斯科特

Answer 1

我今天遇到了同样的问题。我有background-size: 300px;和:hover，background-size:325px;。一时兴起，我尝试在背景大小中设置高度和宽度，background-size: 300px 300px;和:hover相同，并且它有效！

不确定你将如何处理你的方式，背景大小为百分比，但这可能有帮助！

更新：在Chromium中为known bug。

Answer 2

您必须在.cat-grid而不是.cat-grid:hover

中进行转换

webkit-transition: background-size .6s ease;
transition: background-size .6s ease;

Answer 3

改为使用变换比例：

.cat-grid {
    background-size: 100%;
    transition: all 1000ms ease;
}

.cat-grid:hover {
    background-size: 104%;
    transform: scale(.6);
}

Answer 4

使用背景位置和背景大小来设置动画：检查一下：https://jsfiddle.net/shriharim/8tcbm6zw/

.thumbnail{
    background-image:url('http://www.quirkybyte.com/wp-content/uploads/2016/02/Green-Nature-Trees-l-730x365.jpg');
    float:left;
    margin:1px;
    width:350px;
    height:350px;
    overflow:hidden;
    background-size:450px 450px;
    background-position:0px 0px;
    background-repeat: no-repeat;
}

.thumbnail:hover {
    background-size:550px 550px;
    background-position:-50px -50px;
    transition:all 0.5s ;
    -webkit-transition:all 0.5s ;
    -o-transition:all 0.5s ;
    -moz-transition:all 0.5s ;
}

背景大小转换在chrome中停止工作

4 个答案: