对我来说,这是一个奇迹,为什么规模变换的行为如此奇怪。图像中下面显示的两个元素具有完全相同的html,但缩放变换确实像素化了一些元素...
这个奇怪的行为只是在拖动元素上完成拖动&拖放之后出现,并且拖动的元素元件。CSS3变换比例()确实使像素化一些元素
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发送错误通知。
感谢您的帮助反正:-)
您可以添加和(超时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