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

我偶然发现了一个有趣的bug，在最新版本的Chrome中，背景尺寸的动画化并不能解释过渡。它似乎在Safari、Firefox和Internet Explorer中运行良好

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

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

---

尝试添加新元素，然后为该元素添加背景
添加溢出：隐藏到父元素
在悬停缩放时，子元素

像

下面是第二个解决方案的示例

---

第一种解决方案同样有效。您可以选择：）

Chrome 53无问题。

<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)}