0

我有一个 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;
}
4

2 回答 2

1

将 -webkit-transform: translateZ(0) 添加到正文中。

于 2013-10-02T13:34:58.167 回答
1

由于应用到图像模糊过滤器的过渡，这看起来是一个 Webkit/Blink 错误。在转换过程中，图像顶部的卡片位置似乎计算不正确，因此略有偏移。将其与您非常精确的百分比边距和宽度相结合，导致浏览器渲染中可能出现舍入差异/错误。

因此，您有三个选择。你不能过渡到模糊，只是模糊。或者，让您对卡片宽度和边距的测量不那么精确（即更慷慨地四舍五入您的百分比）。然后总是可以选择忽略它并等待 Chrome 解决问题。

如果您可以隔离此案例，我强烈建议您针对 Chrome 提交一个错误。

于 2013-10-02T01:00:42.407 回答