懸停時的背景大小過渡導致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「晃動」背景圖像

回答

相關問題