在更改chrome中的过滤器时,图像会在悬停时移动

Question

我有一个图像,当我在悬停时模糊它,它稍微移动,就像图像在它的位置抖动,问题只发生在chrome(测试时使用:chromium 63 linux-x86_64),

.item img{
  transition: 250ms all ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.item:hover img{
  filter: blur(2px)
}

我认为它可能与这个问题有关,但没有一个解决方案有效.

更新:

正如@Chase所说,这是一个chrome bug,最稳定的解决方案是等待它被修复.但就目前而言,这个问题的最佳解决方案是@kosh Very的答案

Answer 1

这是在最近的更新中出现的已确认的Chrome错误,应该很快就会得到解决.

这是一个简化的测试用例:https://codepen.io/chasebank/pen/KZgYXK

这是标记为分类的Chromium问题.

我认为现在最好的事情就是什么都没有.等待实施正确的修复.破解承认浏览器错误绝不是一个好主意.

我们可以感到欣慰的是,只有其他人看到此内容的是最近更新过的Chrome用户.我的第一次尝试是要求Slack频道充满熟练的开发者,甚至他们都没有看到它.

$('#toggleBlur').click(function() {
  $('#content').toggleClass('blur')
})

body {
  padding: 5%;
}

div {
  filter: blur(0px);
}

.blur {
  filter: blur(.1px)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggleBlur">Toggle blur</button>

<div id="content">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium eum nisi voluptate eaque! Sequi sit nemo iste. Earum accusantium rerum consectetur cumque sequi maiores maxime reiciendis, alias beatae accusamus labore.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate enim magnam nemo atque, ad placeat ab unde consequatur minima velit, ipsam tempora laudantium molestias sapiente perspiciatis quaerat modi ratione voluptatem?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti commodi cum sed nemo fugiat non esse ex quos consectetur ipsam alias laboriosam, cumque eaque omnis quae accusamus, repellat dolore modi!</p>
</div>

Answer 2

我为您提供两种解决方案：

filter：blur（0.2px）hack （不要问我它是如何工作的）

.item img
{
  transition: filter 250ms ease-in-out;
  filter: blur(0.2px); /* the lowest value I could get on my machine: 0.12805650383234025436px */
  image-rendering: -webkit-optimize-contrast; /* just in case quality degrades */
}

.item:hover img
{
  filter: blur(2px);
}

撇开玩笑，这可能是由处理单元完成的浮点数优化引起的，所以通过将blur设置为.2px，我不是在设置blur（0px）的动画，而是从另一个值开始，而不是像这样计算（假设线性宽松）：

frame1: 0, frame2: .1, frame3: .2, frame4: .3, ...

它像这样计算：

frame1: .2, frame2: .2666, frame3: .3332, ...

因此，增量值已更改，不再导致该位置错误。当然，这里没有适当的数学运算（这对于缓动尤为棘手），但是您可以理解。

这也会略微跳动第一帧。

复制模糊的图像并在它们之间切换（也是最有效的方式）

<div class="item">
    <img class="blurred"  src="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" alt="">
    <img class="original" src="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" alt="">
</div>

.item
{
  position: relative;
}

.item img
{
  max-width: 300px;
  transition: opacity 250ms ease-in-out;
  will-change: opacity;
}

.item .original
{
  transition-delay: 0;
}

.item .blurred
{
  position: absolute;
  filter: blur(5px);
  opacity: 0;
  transition-delay: .1s;
}

.item:hover .original
{
  opacity: 0;
  transition-delay: .2s;
}
.item:hover .blurred
{
  opacity: 1;
  transition-delay: .1s;
}