CSS3 transform 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 (поскольку: 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();
    });
}

Я спрашиваю, потому что я делаю это в конце перетаскивания, но элементы остаются пиксельными.

---

EDIT:

Я знаю причину размытия:

Если в Webkit Элемент масштабируется, а затем заканчивается тегом <canvas>, он становится размытым / пикселизированным! Не знаю точно, почему, но отправлю сообщение об ошибке в Webkit Dev Team.

Спасибо за помощь в любом случае: -)

Answer 1

Как сказано в редактировании вопроса:

Я знаю причину размытия:

Если в Webkit элемент масштабируется, а затем попадает в тег <canvas>, он становится размытым / пикселизированным! Не знаю точно, почему, но отправлю сообщение об ошибке в Webkit Dev Team.

Спасибо за помощь в любом случае: -)

Answer 2

Возможно, я бы предпочел уменьшить его, а затем убрать масштабирование, если вы хотите, чтобы оно было в полном размере. Таким образом, все должно выглядеть гладко и чисто