動畫背景大小在最新版本的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與第二液
第一解決方案工作爲好。你選擇:)