Skip to main content

Posts

Showing posts with the label scale

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; c

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; c

viewport scale doesn't work after orientation change

I use the following function to rescale my viewport on iPad: function rescale(scale){ var headElements = document.getElementsByTagName("meta"); for(var i = 0; i< headElements.length; i++){ var theElement = headElements[i]; if(theElement.name == "viewport"){ theElement.content = "width=device-width, user-scalable=no, initial-scale=" + scale + ", maximum-scale=" + scale + ";"; } } } This works an unlimited number of times (in either portrait or landscape orientation), until I change the orientation of the device, when it ceases to work until i reload the page. Is this a bug in iOS, or are there any workarounds?