背景大小过渡停止在铬中工作

我有一个突然停止在铬中工作的背景大小过渡，我不知道为什么。你可以明白我的意思，如果你将鼠标悬停在此页面上的类别框之一：背景大小过渡停止在铬中工作

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

它曾经工作正常，但现在已经停止了。任何想法为什么？

感谢，

斯科特

来源

2016-06-14 Scott Hunter

这也发生在我身上......它几个星期前工作，最近停止工作。这是一个问题的codepen：http://codepen.io/ericdjohnson/pen/NrRKRY –

这是一个错误：http://stackoverflow.com/questions/37545089/background-size-transitions-in-chrome-51-a -bug-or-a-feature –

你必须给在.cat-grid过渡不.cat-grid:hover

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

来源

2016-06-14 13:17:37 Mani

它已经在 –

使用变换尺度，而不是：

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

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

来源

2016-06-14 13:22:38

这似乎是整个盒子的缩放，而不仅仅是背景图像 –

使用背景位置和背景大小动画：检查：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 ; 
}

来源

2016-06-14 16:59:56 ShriCoder

谢谢，问题是图像框是动态的，所以我必须使用百分比。可以用百分比这样做吗？ –

是的，你可以做到这一点。将背景大小更改为百分比 – ShriCoder

我今天跑了相同的问题。我有background-size: 300px;和:hover，background-size:325px;。一时兴起，我试图在背景大小中设置高度和宽度，所以background-size: 300px 300px;和:hover一样，它的工作！

不知道你需要怎么做，以背景大小为百分比，但也许这有助于！

更新：这是铬的known bug。

来源

2016-06-14 20:29:23

背景大小过渡停止在铬中工作

回答

相关问题