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

Question

我偶然发现了一个有趣的错误，在一个有趣的错误中，背景大小并不能说明最新版本的Chrome中的过渡。它在Safari，Firefox和Internet Explorer中似乎都很好。

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

这是指Godepen

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
第一个解决方案也有效。您选择:)