[英]"Transform: scale" flickering on image hover
I have a gallery of images with the ratio forced ( like this ) and for some reason the images flicker when you scale them with transform.我有一个强制比例的图像库( 像这样),由于某种原因,当您使用变换缩放图像时,图像会闪烁。 I have tried both "-webkit-transform-style: preserve-3d" and "-webkit-backface-visibility: hidden" but it didnt fix it.我已经尝试了“-webkit-transform-style: preserve-3d”和“-webkit-backface-visibility: hidden”,但没有解决。 It seems that it only happens in chrome.似乎它只发生在 chrome 中。
Live version with one image where you can see that the lines of the bricks flicker(chrome): https://codepen.io/N.netten/pen/boRQVE带有一张图像的实时版本,您可以在其中看到砖块的线条闪烁(chrome): https://codepen.io/N.netten/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);
}
Thanks for your help.感谢您的帮助。
I found a "fix", I replaced the img with background-image in the .inner div. 我找到一个“修复程序”,将.inner div中的img替换为background-image。 It still has a bit of flickering but its not noticeable. 它仍然有些闪烁,但不明显。 Why this only happens in Chrome I still have no idea. 为什么只在Chrome中发生这种情况,我还是不知道。
Live version with fix for chrome: https://codepen.io/Nanetten/pen/boRQVE [uncomment the img in html to see the differences] 带有Chrome修复程序的实时版本: https : //codepen.io/Nanetten/pen/boRQVE [取消注释html中的img以查看差异]
.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);
}
I had same issue and ended up doing something like this我有同样的问题,最后做了这样的事情
image {
object-fit: fill;
transition: transform 0.3s ease;
transform-origin: center;
transform: scale(1.01); //add this line to get over the flicker effect
&:hover {
transform: scale(1.14);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.