在更改Chrome中的过滤器时，图像在悬停时移动 [英] Image moves on hover when changing filter in chrome

问题描述

我有一个图像，当我在悬停时模糊它时，它会稍微移动，就像图像在其位置晃动一样，问题只发生在chrome中（使用：chromium 63 linux-x86_64测试），

  .item img {
转换：250ms全部缓进; 
 -webkit-backface-visibility：hidden; 
 backface-visibility：hidden; 
} 
 
 .item：hover img {
 filter：blur（2px）
} 
  

我认为这可能与

更新：

由于 @ Chase说，这是一个铬错误，最稳定的解决方案是等待它被修复。但现在，这个问题的最佳解决方案是 @ kosh非常的答案

这是一个已确认的Chrome漏洞，在最近的更新中弹出，并希望很快得到解决。

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

以下是 Chromium issue 标记为分流。

我认为现在最好的做法是什么都不做。等待一个适当的修复被实施。

我们可以放心，只有其他人看到这一点是Chrome用户 最近 已更新。我的第一次尝试是要求一个充满技能的开发者的Slack频道，甚至他们都没有看到它。

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>切换模糊< ; /按钮>< div id =content> < p> Lorem ipsum dolor坐，amet consectetur adipisicing elit。 Accusantium eum nisi voluptate eaque！ Sequi坐着nemo iste。 Earum accusantium rerum consectetur cumque sequi maiores maxime reiciendis，别名beatae accusamus labore。< / p> < p> Lorem ipsum，dolor sit amet consectetur adipisicing elit。 Voluptate enim magnam nemo atque，ad place at ab undecquatatur minima velit，ipsam tempora laudantium molestias sapiente perspiciatis quaerat modi ratione voluptatem？< / p> < p> Lorem ipsum dolor sit amet consectetur adipisicing elit。 Deleniti commodi and sed nemo fugiat non esse ex quos consectetur ipsam alias laboriosam，cumque eaque omnis quae accusamus，repellat dolore modi！< / p>< / div>

I have an image, when i blur it on hover, it slightly moves, it's like the image shakes in its position, problem only occurs in chrome ( tested with: 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)
}

I thaught it might be related to this issue, but none of the solutions worked.

UPDATE :

As @Chase said, this is a chrome bug and the most stable solution is to wait for it to be fixed. but for now, the best solution for this issue is @kosh Very's answer

解决方案

This is a confirmed Chrome bug that popped up in a recent update, and should hopefully get resolved soon.

Here's a reduced test case: https://codepen.io/chasebank/pen/KZgYXK

Here's the Chromium issue marked for triage.

I think the best thing to do for now is nothing. Wait for a proper fix to be implemented. It's never a good idea to hack around an acknowledge browser bug.

We can take some comfort in the fact that the only other people seeing this are Chrome users who recently updated. My first try was asking a Slack channel full of skilled devs, and even they weren't seeing it.

$('#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>

这篇关于在更改Chrome中的过滤器时，图像在悬停时移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！