鼠标悬停时背景大小过渡导致Chrome浏览器背景图像"抖动"问题

Question

我试图实现最近看到的效果，即在悬停时背景图像缩放。我几乎用这里的示例完成了它：https://jsfiddle.net/qyh6nbwt/ ，但似乎非常抖动（通过悬停在上面时你会明白我的意思），我使用的是最新版本的Chrome浏览器，正在运行OSX，尚未在其他浏览器中检查过。 有没有办法使它更平滑，以便在缩放时不会“抖动”？

HTML

<div id="example">
    test
</div>

CSS

#example {
   background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg);

    background-position: center center;
    width: 250px;
    height: 250px;
    transition:all 1000ms ease;
    background-size: 100% auto;
}

#example:hover {
    background-size: 160% auto;
}

- Ilja

---

你可以通过在 :hover 上添加 transform: scale(1.1); 来解决它，但这并不能完全解决问题。非常有兴趣看看这是为什么。 - knocked loose

它必须是一个背景图片吗？ - Timotheus0106

我有一个不太好的解决方法，如果你想看的话：https://jsfiddle.net/qyh6nbwt/2/ 但这似乎是Chrome的性能问题。 - Al-Mothafar

Answer 1

只需使用 transform 和 scale。

所以，不要将背景图像设置为 160%，而是使用：

transform:scale(1.5);

关于 transform CSS 属性的一些信息，您可以在此处找到：这里

要在您的情况下使用 transform scale，您需要一个带有溢出隐藏的包装器，这样只有内部 div 变大并被外部 div 切掉。

请参见更新的 fiddle。

问候 Timmi

- Timotheus0106

---

这是一个简单的解决方案，但它也放大了文字“测试”，这可能违反了OP的意图。 - knocked loose

我在处理一个带有大型背景图片（2Mb）的div的background-size转换时遇到了问题，这导致浏览器图像缓存崩溃，强制我进行“强制刷新”（CTRL+F5）才能恢复所有浏览器选项卡中出现此图像的图像。将background-size转换更改为transform:scale可以绕过此错误。 - Leopoldo Sanczyk

Answer 2

使用 transform scale 替代背景大小变化的过渡效果：https://jsfiddle.net/qyh6nbwt/

transform: scale(2, 2);

- Ajarat

Answer 3

所以我把这个问题作为我的使命来解决，结果证明这并不是我想象中那么简单的修复方法。

虽然有点不太干净，但你需要像这样在一个

里面框住你的

：

<div class="example">
    <div></div>
    <p>test</p>
</div>

接着，您可以更准确地定位缩放，像这样：

div.example {
    height: 250px;
    width: 250px;
    overflow: hidden;
    position: relative;
}

div.example > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.example:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

你可以使用 scale 和 transition 属性来调整缩放和速度。

这里有一个工作的示例 fiddle，希望能帮到你，我在 Chrome/Safari/Firefox 中测试过，效果还不错。

- knocked loose