CSS过渡效果使图像模糊/移动图像1px，在Chrome？ [英] CSS transition effect makes image blurry / moves image 1px, in Chrome?

问题描述

当div被悬停时，CSS过渡效果会移动div。

问题在这个例子中可以看出，过渡有可怕的副作用，使图像在div中向下/向右移动1px（可能调整大小过于轻微？），以便它出现的位置和离焦... ...

毛刺似乎应用了整个悬浮效果的应用，从试验和错误的过程，我可以安全地说，只有似乎发生，当翻译过渡移动div（框阴影和不透明度也被应用，但是在删除时没有区别错误）。

第二编辑：实际上问题没有解决！

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

Any > >

  .yourDivClass {
 / * ... * / 
 
 -webkit- 
 -webkit-transform：translateZ（0）scale（1.0，1.0）; 
} 
  

这是什么使它的行为更多的2D。 / p>

• 背面绘制为默认值，允许使用rotate
  翻转内容。


• 翻译Z轴始终为零值。
如果您只想向左，向右，上，下，缩放或旋转li>

编辑

Chrome现在可处理<$ c没有 -webkit - 前缀的$ c> backface-visibility 和 transform 我目前不知道这如何影响其他浏览器渲染（FF，IE），所以使用非前缀版本谨慎。

When the div is hovered over, a CSS transition effect moves the div.

The problem, as you can see in the example, is that the 'translate' transition has the horrible side effect of making the image in the div move by 1px down/right (and possibly resize ever so slightly?) so that it appears out of place and out of focus...

The glitch seems to apply the whole time the hover effect is applied, and from a process of trial and error I can safely say only seems to occur when the translate transition moves the div (box shadow and opacity are also applied but make no difference to the error when removed).

2nd EDIT: Actually, problem NOT solved!

In creating a JSFiddle to illustrate the problem I stumbled across an interesting observation. The problem only happens when the page has scrollbars. So the example with just one instance of the div is fine, but once more identical divs are added and the page therefore requires a scrollbar the problem strikes again...

Any ideas?!

解决方案

Have you tried this in CSS?

.yourDivClass {
    /* ... */

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

What this does is it makes the division to behave "more 2D".

• Backface is drawn as a default to allow flipping things with rotate and such. There's no need to that if you only move left, right, up, down, scale or rotate (counter-)clockwise.
• Translate Z-axis to always have a zero value.

Edit

Chrome now handles backface-visibility and transform without the -webkit- prefix. I currently don't know how this affects other browsers rendering (FF, IE), so use the non-prefixed versions with caution.

这篇关于CSS过渡效果使图像模糊/移动图像1px，在Chrome？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！