CSS3变换比例（）确实使像素化一些元素

对我来说，这是一个奇迹，为什么规模变换的行为如此奇怪。图像中下面显示的两个元素具有完全相同的html，但缩放变换确实像素化了一些元素...
这个奇怪的行为只是在拖动元素上完成拖动&拖放之后出现，并且拖动的元素元件。CSS3变换比例（）确实使像素化一些元素

click to see the Image

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

添加了哈弗类作为元素悬停...同样的效果，如果我使用添加的

div.KE_coverflowContainer:hover

istead通过JavaScript的类（因为：悬停不工作在IE中（在其他元素，但<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发送错误通知。

感谢您的帮助反正:-)

来源

2012-01-31 beatjunky99

您可以添加和（超时0后）删除类强制重绘。不知道是否可以解决问题。 – user123444555621 2012-01-31 09:03:21

$（'。KE_coverflowContainer'）。addClass（'aunusedclass'）; （函数（）{$（'。KE_coverflowContainer'）。removeClass（'aunusedclass'）;}，0）;};}} 也没有帮助... :-(或者我必须使用一个类在CSS文件spicified？编辑：回答我的自我：甚至没有使用存在的类改变了一些东西！ – beatjunky99 2012-01-31 09:13:00

这是一个非常奇怪的行为。所有浏览器都发生问题吗？我在[jsfiddle]（http://jsfiddle.net/qSS6J/2/）中做了一个小演示，我没有任何问题。 – 2012-01-31 09:17:27

作为问题的编辑说：

我知道模糊的原因：

如果Webkit的一个元素被缩放，然后在结束0标签，它变得模糊/像素化！不知道为什么，但会向Webkit Dev Team发送错误通知。

感谢您的帮助:-)

来源

2014-07-12 08:14:25 beatjunky99

“tag”是什么意思？ – MMachinegun 2014-07-12 12:08:55

，你有没有尝试应用'-webkit-transform：translate3d（0，0，10px）;'？ – MMachinegun 2014-07-12 12:10:47

@marczking我的意思是一个'

我可能会选择将其缩小，然后删除缩小，当你想它在全尺寸。在这样一切都应该看起来光滑“N干净

来源

2014-06-25 12:51:56 Leo

该元素有一个图像包括最大300px x 300px，然后显示在30px 30px，这样不是问题！其余的只是一个div和p容器。所以规模不应该像素化。 – beatjunky99 2014-07-12 08:12:19

CSS3变换比例（）确实使像素化一些元素

回答

相关问题