悬停时的背景大小转换导致 chrome “摇晃”背景图像答案

【问题标题】：background-size transition on hover causes chrome to "shake" background image悬停时的背景大小转换导致 chrome “摇晃”背景图像
【发布时间】：2015-05-13 14:53:21
【问题描述】：

我正在尝试实现我最近看到的效果，其中背景图像在悬停时放大。我几乎用这里的例子做了这件事：https://jsfiddle.net/qyh6nbwt/ 但它似乎很不稳定（你会明白我的意思是把鼠标悬停在它上面），我在 osx 上运行最新的 chrome 版本，还没有在其他浏览器中检查过. 有没有办法让它更平滑，所以在放大时不会“晃动”？

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

【问题讨论】：

您可以通过在:hover 上添加transform: scale(1.1); 来修复它，但这并不能完全修复它。很想知道这是为什么。
必须是背景图片吗？
好吧，如果你想看的话，我有肮脏的解决方法：jsfiddle.net/qyh6nbwt/2 但它似乎是 chrome 性能问题。

标签： css background-image transition background-size

【解决方案1】：

只需使用变换、缩放。

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

transform:scale(1.5);

一些关于transform css属性的信息你可以找到here

要在您的情况下使用变换比例，您将需要一个隐藏溢出的包装器，以便内部 div 变大并被外部 div 切割。

查看更新的fiddle.

你好，提米

【讨论】：

这是一个简单的解决方案，但这也会放大可能违背 OP 意图的文本“Test”。
当一个带有大背景图像 (2Mb) 的 div 的背景大小的转换导致浏览器图像缓存崩溃时，我遇到了问题，迫使我“强制刷新”(CTRL+ F5) 在所有浏览器选项卡中恢复图像，此图像出现。将背景尺寸转换更改为 transform:scale，绕过了这个错误。

【解决方案2】：

使用变换比例而不是背景大小变化过渡：https://jsfiddle.net/qyh6nbwt/

transform: scale(2, 2);

【讨论】：

【解决方案3】：

所以我把这个作为我的任务来解决这个问题，结果发现它并不像我想象的那么简单。

这有点脏，但您需要将您的 div 框在 div 中，如下所示：

<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，它似乎运行良好。

【讨论】：