CSS3變換比例 - 模糊桌面和完美移動

我有一個背景圖像的div。在懸停時，我應用了2個濾鏡（對比度和亮度）並進行小比例縮放。CSS3變換比例 - 模糊桌面和完美移動

在縮放轉換過程中，Chrome和Safari上的圖像變得非常模糊（停止運動後，圖像變得更加明確，但仍然模糊不清），而在Mozilla中，圖像變得模糊。在我的iPad（Chrome和Safari）中，這個動畫看起來很流暢和很棒（通常在移動設備上有模糊和不流暢的動畫，但事實並非如此）。

試圖應用一些translate3d(0,0,0), translateZ(0px), perspective: 1000來獲得一些硬件CSS3加速但仍然是相同的結果。

下面是一些代碼：

.animate { 
    position: absolute; 
    left: 50px; 
    z-index: 2; 

    width: 320px; 
    height: 180px; 

    background-image:url('./images/example.png'); 
    background-size: cover; 
    background-position: center center; 

    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); 

    transition: 300ms ease-out; 
} 

.animate:hover { 
    transform: scale(1.03); 
    filter: contrast(120%) brightness(100%); 
}

發生這種情況，即使我更換div的背景圖片爲<img>標籤。

來源

2016-09-20 bmfteixeira

你能提供一個鏈接嗎？ –

對不起，先生，這仍然在公司舉辦，我無法提供。 – bmfteixeira

嘗試使用scale3d而不是scale.just猜測。通常情況下，這是相反的方式，在瀏覽器中平滑，而不是在iPad上。

來源

2016-09-20 23:14:45 sean

我不是100％確定爲什麼，但它的工作！如果您保留CSS加速命令，現在在桌面上更流暢，並且仍然不會在移動設備上模糊。謝謝！ – bmfteixeira

CSS3變換比例 - 模糊桌面和完美移動

回答

相關問題