CSS3变形scale()会使一些元素像素化

Question

对我来说，缩放变换为什么会表现得如此奇怪是个奇迹。下图中显示的这两个元素具有完全相同的html代码，但缩放变换却会使某些元素失真...
这种奇怪的行为只出现在完成了拖放操作后，作用于被拖动元素及其周围的元素。

点击查看图片

css代码如下：

div.KE_coverflowContainer {
    vertical-align:top;
    height:122px;
    width:90px;
    padding:5px;
    text-align:center;
    display:inline-block;
    margin:10px 5px 5px 0px;
    background:#e4e4e4;
    position:relative;
    cursor:default;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #bababa;
}
div.KE_coverflowContainerHover {
    -moz-transform: scale(2) translate(0px,29px);  
    -o-transform: scale(2) translate(0px,29px);  
    -webkit-transform: scale(2) translate(0px,29px);  
    transform: scale(2) translate(0px,29px);  
    z-index:1000;
    cursor:move;
    margin-top:0px;
    border:1px solid #bababa;
    -moz-box-shadow: 6px 6px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 6px 6px 5px rgba(0,0,0,0.3);
    box-shadow: 6px 6px 5px rgba(0,0,0,0.3);    
}

当鼠标悬停在元素上时，会添加Hover类... 如果我使用

，效果是相同的。

div.KE_coverflowContainer:hover

不是通过JavaScript添加类（因为在IE中：hover无法在除<a>元素以外的其他元素上工作，但mouseenter和mouseleave可以，我更喜欢JS解决方案）。

有谁知道如何解决这个问题？

是否有其他方法重新绘制元素，而不是使用以下代码？

$.fn.redrawElement = function(){
    return this.each(function(index, element){
        var n = document.createTextNode(' ');
        $(element).appendChild(n);
        (function(){n.parentNode.removeChild(n)}).defer();
    });
}

我之所以询问，是因为在拖放结束后，元素仍然模糊不清。

---

编辑：

我知道模糊的原因：

如果在Webkit中，一个元素被缩放并最终停在了<canvas>标签上方，它会变得模糊/像素化！不确定原因，但会向Webkit Dev Team发送错误报告。

无论如何，感谢你的帮助 :-)

- beatjunky99

---

你可以添加并（在超时0之后）删除一个类来强制重新绘制。不确定这是否解决了问题。 - user123444555621

$('.KE_coverflowContainer').addClass('aunusedclass'); setTimeout(function(){$('.KE_coverflowContainer').removeClass('aunusedclass');},0);这也没有帮助... :-( 或者我必须使用CSS文件中指定的类吗？编辑：自己回答：即使使用存在的类也不会改变任何东西！ - beatjunky99

这是非常奇怪的行为。问题是否在所有浏览器上都出现？我在jsfiddle上制作了一个小演示，我没有遇到任何问题。 - Kane Cohen

谢谢，我没有想到这个。这实际上只是在基于 Webkit 的浏览器（Safari、Chrome）中出现的问题... FF 渲染正常... 无法在 IE 上测试，因为我在 Mac 系统上 ^^但问题仍然存在，尝试清除缓存和重置 Webkit，也许那时它会起作用... - beatjunky99

嘿，你可以回答自己的问题来帮助其他人 :) - Noah Wetjen

Answer 1

如果我是你，我会先将其缩小，然后在需要全尺寸时取消缩小。这样一来，所有东西看起来都会很平滑和清晰。

- Leo

---

元素中包含一个最大为300px x 300px的图像，然后以30px x 30px的大小显示，因此这不是问题！其余部分只是一个div和p容器。因此，缩放不应该使像素模糊。 - beatjunky99

Answer 2

如问题编辑中所述：

我知道模糊的原因：

如果在Webkit中，一个元素被缩放并最终覆盖在<canvas>标签上，它会变得模糊/像素化！不知道具体原因，但会向Webkit开发团队发送错误通知。

无论如何，感谢您的帮助 :-)

- beatjunky99

---

“tag” 是什么意思？ - MMachinegun

你尝试过应用“-webkit-transform: translate3d(0, 0, 10px);”吗？ - MMachinegun

@marczking 我的意思是 <canvas> 标签。已更正。它适用于该特定 Webkit 版本中的所有转换。 - beatjunky99