CSS过渡效果使图像模糊/移动图像1px，在Chrome？

提问者：小点点

我有一些CSS，在悬停时，一个CSS过渡效果将移动一个div。

正如您在示例中所看到的，问题在于转换有一个可怕的副作用，即使div中的图像向下/向右移动1px（并且可能如此轻微地调整大小？）使它显得不恰当，不集中。。。

这个小故障似乎在悬停效果应用的整个过程中都会出现，从反复试验的过程来看，我可以有把握地说，只有在转换过渡移动div时才会出现（框影和不透明度也会应用，但在移除后对错误没有影响）。

只有当页面有滚动条时，问题才会出现。因此，仅有一个div实例的示例是可以的，但是一旦添加了更多相同的div，并且页面因此需要滚动条，问题就会再次出现。

匿名用户

null

在CSS中尝试以下操作:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

这样做的是，它使部门的行为“更多的2D”。

将Z轴转换为始终为零值。/li> 和，而没有前缀。我目前不知道这如何影响其他浏览器的呈现（FF，IE)，所以使用无前缀版本时要谨慎。/li>

匿名用户

你需要对元素应用3D变换，这样它就会得到自己的复合层。例如:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

或

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

更多关于图层创建条件的信息，你可以在这里阅读:Chrome加速渲染

一个解释:

示例（悬停绿框）:

当您在元素上使用任何过渡时，它会导致浏览器重新计算样式，然后重新布局您的内容，即使过渡属性是可视的（在我的示例中它是不透明的），最后绘制一个元素:

这里的问题是内容的重新布局，这会在转换发生时使页面上的元素产生“跳舞”或“闪烁”的效果。如果你将转到设置，勾选“显示复合层”复选框，然后应用3D变换到一个元素，你会看到它得到它自己的层，用橙色边框勾勒。

元素获得自己的图层后，浏览器只需要在过渡时合成图层，而不需要重新布局甚至绘制操作，因此必须解决以下问题:

匿名用户

嵌入式youtube iframe也有同样的问题（翻译用于居中iframe元素）。没有一个以上的解决方案工作，直到尝试重置css过滤器和魔术发生。

结构:

<div class="translate">
     <iframe/>
</div>

样式[以前]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

样式[之后]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

共3个答案