悬停时的背景大小过渡导致Chrome“晃动”背景图像

我正试图实现最近看到的效果，其中背景图像放大悬停。我几乎在这里用例子：https://jsfiddle.net/qyh6nbwt/，但它似乎很不稳定（你会理解我的意思是悬停在它上面），我在osx上运行最新的chrome版本，还没有在其他浏览器中检查它。有没有办法让它更平滑，所以在放大时不会“摇晃”？悬停时的背景大小过渡导致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; 
}

来源

2015-05-13 Ilja

你可以通过在'：hover'上添加'transform：scale（1.1）'来修复它，但是这并没有完全解决它。非常感兴趣，看看这是为什么。 –

它是否必须是背景图片？ –

嗯，我有肮脏的解决方法，如果你想看到：https://jsfiddle.net/qyh6nbwt/2/ 但它似乎铬性能问题。 –

只使用变换，尺度。

所以只是代替设置背景图片，以160％的使用

transform:scale(1.5);

有关变换CSS属性的一些信息，你可以找到here

使用transform规模的情况下，你将需要一个包装与溢出隐藏所以只是内部股利变得更大，并由外部分割。

看到更新fiddle.

问候Timmi已

来源

2015-05-13 15:07:28

这是一个简单的解决方案，但这也可以放大文本“测试”，这可能违背了OP的意图。 –

更好？ http://jsfiddle.net/qyh6nbwt/4/ –

我在使用大背景图像（2Mb）的div的背景大小转换时导致浏览器图像缓存崩溃，迫使我“强制刷新“（CTRL + F5）以恢复此图像显示的所有浏览器选项卡中的图像。将背景大小的转换更改为transform：scale，绕过了此错误。 –

使用变换，而不是背景大小的变化过渡规模：

transform: scale(2, 2);

来源

2015-05-13 15:10:50 Ajarat

所以我做了这个我的使命摸不着头脑，原来这并不像我想象的那么简单。

这是一个有点脏，但你需要一个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，它似乎工作得很好。

来源

2015-05-13 15:23:16

悬停时的背景大小过渡导致Chrome“晃动”背景图像

回答

相关问题