Skip to main content

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:





Now I know the cause of the blur:





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





Thanks for helping anyway :-)


Comments

Popular posts from this blog

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?

CCNA 3 Final Exam => latest version

1 . Which security protocol or measure would provide the greatest protection for a wireless LAN? WPA2 cloaking SSIDs shared WEP key MAC address filtering   2 . Refer to the exhibit. All trunk links are operational and all VLANs are allowed on all trunk links. An ARP request is sent by computer 5. Which device or devices will receive this message? only computer 4 computer 3 and RTR-A computer 4 and RTR-A computer 1, computer 2, computer 4, and RTR-A computer 1, computer 2, computer 3, computer 4, and RTR-A all of the computers and the router   3 . Refer to the exhibit. Hosts A and B, connected to hub HB1, attempt to transmit a frame at the same time but a collision occurs. Which hosts will receive the collision jamming signal? only hosts A and B only hosts A, B, and C only hosts A, B, C, and D only hosts A, B, C, and E   4 . Refer to the exhibit. Router RA receives a packet with a source address of 192.168.1.65 and a destination address of 192.168.1.161...