图像悬停时“变换：缩放”闪烁

我有一个图像库，其比例被强制（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

图像悬停时“变换：缩放”闪烁

回答

相关问题