圖像懸停時「變換：縮放」閃爍

我有一個圖像庫，其比例被強制（like this），並且由於某些原因，當您使用變換對圖像進行縮放時，圖像會閃爍。我已經嘗試了「-webkit-transform-style：preserve-3d」和「-webkit-backface-visibility：hidden」，但它沒有修復它。它似乎只發生在鉻。圖像懸停時「變換：縮放」閃爍

真人版用一個形象，你可以看到，磚線閃爍（鉻）：https://codepen.io/Nanetten/pen/boRQVE

<div class="grid-item grid-item--width6"> 
    <div class="item"> 
    <div class="outer half"> 
     <div class="inner"><img src="https://image.ibb.co/fOAxqb/1.jpg" alt="test"></div> 
    </div> 
    </div>

* { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
} 

.item { 
    display: inline-block; 
    width: 100%; 
    max-width: 100%; 
    overflow: hidden; 
    -webkit-transition: all .1s ease-in-out; 
    -o-transition: all .1s ease-in-out; 
    transition: all .1s ease-in-out; 
} 
.item .outer { 
    position: relative; 
    height: 0; 
} 
.item .inner { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
} 
.item img { 
    width: 100%; 
    height: 100%; 
    transition: all .5s ease-out; 
    display: block; 
} 
.item img:hover { 
    -webkit-transform: scale(1.15); 
    -ms-transform: scale(1.15); 
    transform: scale(1.15); 
} 

.half { 
    padding-top: calc(50%); 
} 


.grid-item { 
    float: left; 
    display: block; 
    margin: 5px; 
} 

.grid-item--width6 { 
    width: calc(50% - 10px); 
}

感謝您的幫助。

來源

2017-09-30 M. GR.

我沒有看到閃爍。你可以錄製一個gif併發布嗎？我使用[Cloud App]（https://www.getcloudapp.com/apps）。 –

我認爲它是因爲我改變了過渡時間，現在應該閃爍https://codepen.io/Nanetten/pen/boRQVE GIF：https：//imgur.com/a/eUwl0 –

我做了一些使用這個短語的谷歌搜索，「變換：縮放模糊的線條」，並且在你的codepen上嘗試了幾件事情，但它沒有什麼區別。它似乎是Chrome上最糟糕的版本，在Firefox上更好，在Safari上也差不多，使用最新版本的fwiw。 –

我發現了一個「修復」，我用.inner div中的background-image替換了img。它仍然有點閃爍，但不明顯。爲什麼這隻發生在Chrome我仍然不知道。

現場版本修復了鍍鉻：https://codepen.io/Nanetten/pen/boRQVE [取消對IMG在HTML中看到的差異]

.inner { 
    background-image: url(https://image.ibb.co/fOAxqb/1.jpg); 
    background-size:cover; 
    transition: all 1s; 
} 
.inner:hover { 
    -webkit-transform: scale(1.15); 
    -ms-transform: scale(1.15); 
    transform: scale(1.15); 
}

來源

2017-09-30 14:31:54

圖像懸停時「變換：縮放」閃爍

回答

相關問題