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

当悬停元素时添加悬停类...如果我使用

，效果相同

div.KE_coverflowContainer:hover

不是通过JavaScript添加类（因为：hover在IE中不起作用（在＆lt; a＆gt;元素的其他元素上），但是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中缩放了一个Element，然后在<canvas>标记上结束，那么它会变得模糊/像素化！不知道确切原因，但会向Webkit开发团队发送错误通知。

感谢您的帮助： - ）

Answer 1

我可能会选择缩小它然后移除缩小尺寸，当你想要它的全尺寸时..这样一切都应该看起来很光滑'干净

Answer 2

如问题编辑所述：

我知道模糊的原因：

如果在Webkit中缩放了一个Element，然后在<canvas>标记上结束，那么它会变得模糊/像素化！不知道确切原因，但会向Webkit开发团队发送错误通知。

感谢您的帮助： - ）

CSS3 transform scale（）确实像素化了一些元素

2 个答案: