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

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex