Search code examples
jquerycsstransformscale

CSS3 transform scale() does pixelate some elements

It's a miracle to me why the scale transform does behave in such a strange way. The two elements shown below in the image have exactly the same html behind, but the scale transform does pixelate some elements...
this strange behaviour just appears after a completed drag & drop on the dragged element, and the elements around the dragged element.

click to see the Image

css is the following: 

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

the Hover class is added as the element is hovered... Same effect if I use 

div.KE_coverflowContainer:hover

istead of adding the class by JavaScript (since :hover is not working in IE (on other elements but the <a> element), but mouseenter and mouseleave are, i prefer the JS solution).

Does anyone know how to get rid of this problem?

Is there a other way to redraw an an element than following code?

$.fn.redrawElement = function(){
    return this.each(function(index, element){
        var n = document.createTextNode(' ');
        $(element).appendChild(n);
        (function(){n.parentNode.removeChild(n)}).defer();
    });
}

I ask because i do this on the end of the drag & drop, but the elements stay pixelated.

EDIT:

I know the cause of the blur:

If in Webkit an Element is scaled and then ends up over a <canvas> tag, it gets blured/pixelated! Dont know exactly why, but will send a bug notice to Webkit Dev Team.

Thanks for helping anyway :-)

Solution

  • As said in the edit of the question:

    I know the cause of the blur:

    If in Webkit an Element is scaled and then ends up over a <canvas> tag, it gets blured/pixelated! Dont know exactly why, but will send a bug notice to Webkit Dev Team.

    Thanks for helping anyway :-)