最新バージョンの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
です。あなたが選ぶ:)