动画背景大小在最新版本的Chrome中无法正常工作

Question

我偶然发现了一个有趣的错误，其中动画背景大小并未考虑到最新版Chrome中的过渡。它似乎在Safari，Firefox和Internet Explorer中运行良好。

background-size: 100% 
transition: background-size 0.5s 

    &:hover 
    background-size: 150% 
    transition: background-size 0.5s 

Here's a link to a codepen

Answer 1

尝试添加一个新的元素，然后添加背景到该元素
添加溢出：隐藏父元素
在悬停规模的子元素

像

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

.child { height:400px;width:200px;background:url....;transition:0.5s} 
.parent { overflow:hidden;} 
.parent:hover .child { transform:scale(1.5)} 

或者你可以使用一个伪元素，如：前

.parent { overflow:hidden;} 
.parent:before { width:100%;height:100%;content:"";position:absolute;top:0;background:url....;transition:0.5s } 
.parent:hover:before { transform:scale(1.5)} 

这里有一个jsfiddle与第二液
第一解决方案工作为好。你选择:)