Chrome的CSS过渡效果使图像模糊/移动图像1px?

当divhover时,CSS过渡效果会移动div。

这个问题,正如你在例子中看到的那样,“翻译”过渡有使div中的图像向下/向右移动1px的可怕的副作用(并且可能稍微resize),以使其显现出来的地方和聚焦…

这个小故障似乎适用于整个hover效果的应用,从一个反复试验的过程中,我可以肯定地说,只有当翻译过渡移动div时才会出现(box阴影和不透明也适用,但没有任何区别错误时删除)。

第二编辑:其实,问题没有解决!

在创build一个JSFiddle来说明这个问题时,我偶然发现了一个有趣的观察。 该问题只发生在页面有滚动条时。 所以只有一个div的例子的例子很好,但再一次相同的div被添加,因此页面需要一个滚动条的问题再次罢工…

有任何想法吗?!

你有没有在CSS中试过这个?

.yourDivClass { /* ... */ -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); } 

它所做的是使该部门performance“更多2D”。

  • 背面是作为默认绘制,以允许翻转东西与旋转等。 如果您只是向左,向右,向上,向下,缩放或顺时针旋转(反向),则无需这样做。
  • 翻译Z轴始终有一个零值。

编辑

Chrome现在可以处理backface-visibilitytransform而不需要-webkit-前缀。 我目前不知道这是如何影响其他浏览器渲染(FF,IE)的,所以请谨慎使用非前缀版本。

你需要将3D变换应用到元素,所以它会得到自己的复合层。 例如:

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

要么

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

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


一个解释:

示例(hover绿色框):

  • 问题:转换可能会导致同胞元素(OSx Lion,Chrome 30)
  • 解决scheme:在其自己的复合层上的一个元素

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

截图

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

截图

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

截图

如果embedded的youtube的iframe(翻译被用于居中iframe元素)相同的问题。 上述解决scheme都没有工作,直到尝试重置CSSfilter和魔法发生。

结构体:

 <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); } 

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

 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+ */ 

有了这个浏览器将知道渲染的algorithm

缩放倍增,并缩放到一半zoom为我工作。

 transform: scale(2); zoom: 0.5; 

尝试filter: blur(0);

它为我工作

刚刚得到同样的问题。 尝试设置位置:相对于父元素,为我工作。