CSS3 transform scale () pixela algunos elementos

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 :-)

preguntado el 31 de enero de 12 a las 08:01

You could add and (after timeout 0) remove a class to force a redraw. Not sure if that solves the problem though. -

$('.KE_coverflowContainer').addClass('aunusedclass'); setTimeout(function(){$('.KE_coverflowContainer').removeClass('aunusedclass');},0); does not help either... :-( or do i have to use a class spicified in the CSS-file?? Edit: giving answer my self: no not even using a class that exists changes something! -

That is a very strange behavior. Does the problem occur on all browsers? I've made a little demo in jsFiddle and i don't have any of the problems. -

Thanks, didn't thought about this. It's really just a problem in webkit based browsers (safari, chrome)... FF renders fine... cant test on IE, cause i'm on the Mac side ^^ but the problem continues to exist, trying to clear cache and reset webkit, maybe then it works... -

Hey, you can answer your own Question to help others :) -

2 Respuestas

I'd probably choose to scale it down and then remove the downscaling, when you want it in full size.. In that way everything should look smooth 'n clean

Respondido el 25 de junio de 14 a las 16:06

The elements have an image included which is max 300px x 300px and then displayed at 30px by 30px, so that is not the problem! The rest is just a div and p container. so scale should not pixelate. - beatjunky99

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 :-)

Respondido 12 Jul 14, 19:07

que quieres decir con tag? - Machinegun

and have you tried applying -webkit-transform: translate3d(0, 0, 10px);? - Machinegun

@marczking i meant a <canvas> tag. Corrected. It applied to all transformations in that specific Webkit version. - beatjunky99

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.