CSS转换效果会使图像模糊/移动图像1px,在Chrome中？

Question

当div悬停时,CSS过渡效果会移动div.

正如您在示例中看到的那样,问题是"转换"转换具有可怕的副作用,即使div中的图像向下/向右移动1px(并且可能稍微调整一下？)以使其显示出来的地方和焦点......

小故障似乎应用了悬浮效果的整个时间,并且从试验和错误的过程我可以肯定地说,只有当翻译过渡移动div时才会出现(框阴影和不透明度也被应用但是没有区别)删除时的错误).

第二次编辑:实际上,问题没有解决!

在创建一个JSFiddle来说明问题时,我偶然发现了一个有趣的观察结果.只有页面有滚动条时才会出现此问题.所以只有一个div实例的例子很好,但是一旦添加了相同的div,因此页面需要滚动条,问题再次出现......

有任何想法吗？!

Answer 1

你在CSS中尝试过这个吗？

.yourDivClass {
    /* ... */

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

这样做是因为它使得分裂表现得更"2D".

• 背面被绘制为默认设置,允许使用旋转等方式翻转内容.如果您只是向左,向右,向上,向下,缩放或顺时针旋转(反向),则无需这样做.
• 将Z轴平移为始终为零值.

编辑

Chrome现在处理backface-visibility并transform没有-webkit-前缀.我目前不知道这会如何影响其他浏览器渲染(FF,IE),因此请谨慎使用非前缀版本.

Answer 2

您需要将3d变换应用于元素,因此它将获得自己的复合图层.例如:

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

要么

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

有关图层创建标准的更多信息,请参阅此处:Chrome中的加速渲染

一个解释:

示例(悬停绿色框):

• 问题:转换可能会对兄弟元素造成眨眼效果(OSx Lion,Chrome 30)
• 解决方案:自身复合图层上的元素

当您对元素使用任何转换时,它会导致浏览器重新计算样式,然后重新布局您的内容,即使转换属性是可视的(在我的示例中它是不透明的)并最终绘制元素:

这里的问题是重新布局内容,可以在转换发生时在页面上产生"跳舞"或"闪烁"元素的效果.如果您要进行设置,请选中"显示复合图层"复选框,然后将3d变换应用于元素,您将看到它获得了自己的图层,该图层以橙色边框勾勒出来.

在元素获得自己的图层之后,浏览器只需要在转换时合成图层而无需重新布局甚至绘制操作,因此必须解决问题:

Answer 3

嵌入youtube iframe有同样的问题(Translations用于居中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);
}

Answer 4

我推荐了一个实验性的新属性CSS,我在最新的浏览器上测试过,这很好:

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

有了这个,浏览器将知道用于渲染的算法

Answer 5

刚刚找到了一个元素在转换时变得模糊的另一个原因。我曾经transform: translate3d(-5.5px, -18px, 0);在一个元素加载后重新定位它，但是该元素变得模糊。

我尝试了上面的所有建议，但结果证明这是由于我对其中一个翻译值使用了十进制值。整数不会导致模糊，我离整数越远，模糊就越严重。

即5.5px最模糊元素，5.1px最少。

只是想我会把它扔在这里以防万一它对任何人都有帮助。

Answer 6

我通过逐步过渡来解决问题，但不顺利

transition-timing-function: steps(10, end);

这不是一个解决方案，而是一种作弊，并且不能在所有地方应用。

我无法解释它，但它对我有用。其他答案都没有帮助我（OSX、Chrome 63、非视网膜显示屏）。

https://jsfiddle.net/tuzae6a9/6/