【发布时间】：2012-02-23 00:13:57
【问题描述】：
这对我来说是一个奇迹，为什么比例变换会以如此奇怪的方式表现。下图中显示的两个元素背后的 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 添加类（因为 :hover 在 IE 中不起作用（在除 元素之外的其他元素上），但 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 开发团队发送错误通知。
感谢您的帮助 :-)
【问题讨论】：
-
您可以添加和（在超时 0 之后）删除一个类以强制重绘。不知道这是否能解决问题。
-
$('.KE_coverflowContainer').addClass('aunusedclass'); setTimeout(function(){$('.KE_coverflowContainer').removeClass('aunusedclass');},0);也无济于事... :-( 还是我必须使用 CSS 文件中指定的类？？编辑：给出答案我自己：甚至不使用存在的类会改变一些东西！
-
这是一个非常奇怪的行为。所有浏览器都会出现问题吗？我在jsfiddle做了一个小演示，我没有任何问题。
-
谢谢，没想到这个。这实际上只是基于 webkit 的浏览器（safari，chrome）中的一个问题...... FF 渲染很好......无法在 IE 上测试，因为我在 Mac 端 ^^ 但问题仍然存在，试图清除缓存和重置webkit，也许它可以工作......
-
嘿，你可以回答你自己的问题来帮助别人:)
标签： jquery css transform scale