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-visibility和transform而不需要-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);
它为我工作
刚刚得到同样的问题。 尝试设置位置：相对于父元素，为我工作。
