Question

我有一个div（带有css3徽标的蓝卡），当我将鼠标悬停在I图标上时会摆动，你可以在这里查看问题：

http://lab.stephenbe.ca/portfolio/portfoliov3/

我不知道为什么会发生这种情况，我尝试在codepen中重新创建问题：

http://codepen.io/stephenbe/pen/FckrH

这个bug根本没有出现。我注意到如果您的屏幕很小，则不会出现错误。屏幕大小必须在1600左右。

错误出现在最新版本的chrome

中

谢谢

编辑：这是一个截屏视频http://screenr.com/EQkH

移动div的css如下：

.portfolio .card.active {
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  visibility: visible;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

Answer 1

由于应用于图像模糊过滤器的过渡，这看起来是Webkit / Blink错误。在转换期间，看起来卡片在图像顶部的位置未正确计算，因此稍微移位。这与你非常精确的百分比边距和宽度的组合导致可能在浏览器渲染中舍入差异/错误。

因此，您有三种选择。你无法过渡到模糊，只是模糊。或者，对卡片上的宽度和边距进行测量不太精确（即，使您的百分比更加慷慨）。然后总是可以选择忽略它并等待Chrome解决问题。

如果你能隔离案件，我强烈推荐filing a bug against Chrome。

Answer 2

将-webkit-transform：translateZ（0）添加到正文中。

当叠加出现时，Div摆动

2 个答案: