Using transform: scale results in blurry images - css

In our catalog view (online store) we use javascript to get different views of the products and scale the images down with CSS.
3 in a row / 4 or 5/
The default view is 4:
-webkit-transform: scale(0.83);
-moz-transform: scale(0.83);
-ms-transform: scale(0.83);
-o-transform: scale(0.83);
transform: scale(0.83);
Everything works but the images look very blurry in safari. Is there a way to improve the rendering for safari?
Bigger Image: http://i.stack.imgur.com/NaFeB.jpg

it works if you reset the blur filter in safari:
-webkit-filter: blur(0px);
example for all browsers:
filter: none;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
hope it helps

For anyone who didn't find the accepted answer useful, adding this on the parent container worked for me:
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);

Related

CSS 2D transform with SVG background-image in Internet Explorer 9

I've created a left and right navigation button using only a single SVG background image and flipping it horizontally to get the other direction. This works fine in all browsers which support CSS 2D transforms except Internet Explorer 9. Basically the CSS looks like this:
div.nav-left, div.nav-right {
background-image: url('TriangleArrow-Right.svg');
}
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
I've created a jsFiddle which correctly looks like this in Internet Explorer 10, Firefox, Chrome, Safari etc.:
But actually looks like this in IE9:
I've included a greater-than sign to illustrate in which direction the buttons should point. And actually you can see, that IE9 applies the transform correctly to the text, but does the total opposite for the SVG background image.
If I change the SVG background image to a PNG, everything works correctly in IE9 however, see this jsFiddle.
I was unable to find any information on this. It seems to be a bug, as IE9 should support CSS transforms and SVGs as CSS background correctly.
I think you need to use the special syntax for IE:
div.nav-left {
-webkit-transform: scaleX(-1);
/*-ms-transform: scaleX(-1);*/
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/g2y86/1/
It doesn't look very sharp though, maybe there's a better way.
Edit
For flipping, try with this (note that both -ms-filter and filter lines are for IE) :
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/2cPYR/
From what I tried the scaleX-property indeed won't work with negative numbers on an svg background image. If you apply differnt colored borders to the div your are trying to transform you can see, that it actually gets transformed correctly, but the background image is not adapting to its container.
If you just want to solve your immediate problem, you can use -ms-transform: rotate(180deg);, the svg seems to know what it is supposed to do here.
I used filter: FlipV; to accommodate ie9
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9

Rotating a text to 270 degrees in IE8

I am trying to rotate a text to 270 degrees, using this code:
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
It works fine in all browsers but not in IE8. What am I doing wrong?
Try using this:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand');
-moz-transform: matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);
-webkit-transform: matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);
-o-transform: matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);
IE uses another filter to rotate elements.
Here you can read about it
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
And here you can easy calculate coeffitients of rotation matrix http://www.boogdesign.com/examples/transforms/matrix-calculator.html
Just enter the degree value and it will generate the needed code
You need to add just one line of code:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
IE8 does not support this CSS element.
See: http://social.msdn.microsoft.com/Forums/eu/iewebdevelopment/thread/9b21a3c2-6bdf-4aad-a90d-868bdeb3d866
If you are rotating elements just in IE8+, you'll still need a cross-browser approach. That's because the IE filters are deprecated as of IE9, with IE9 now supporting the CSS3 -ms-transform property. However, for IE8 and earlier, a filter such as BasicImage will be necessary to achieve the effect. So to cater for versions in current use, plus future variations, a prudent approach might be to feed the filter to IE8 and earlier through Conditional Comments, but otherwise use a transform set to cater for current browsers.

CSS Perspective Error

When trying to apply a CSS transform with perspective I encounter a weird glitch in that the top half of the divs are unselectable. I have created a a quick demo here on jsfiddle
[The top selection of red boxes should be clickable and such]
Does anyone know how to fix this? I've looked at other similar errors but their solutions don't seem to work here.
Cheers
This should do the trick
.ca-item {
-webkit-transform: skewX(-5deg) scale(1, 1);
-moz-transform: skewX(-5deg) scale(1, 1);
-ms-transform: skewX(-5deg) scale(1, 1);
transform: skewX(-5deg) scale(1, 1);
background-color: blue;
position:relative;
width:1060px;
height:550px;
text-align:center;
}

Transform Properies in CSS

I want to rotate an image when i hover on it.I use the follwing code to rotate.Bui it doesn't works....
#header #scn:hover{transform:rotate(45deg)};
It doesn't works for me.I am using Firefox 4.
Is there any way to perform transform and shadow effects in IE8.
You need to add a prefix for every rendering engine. For Firefox the prefix is -moz-.
To rotate an image in all supported browsers use:
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
For text shadows in IE8 you can use Shadow Filter (MSDN).
Plus there is CSS transforms workaround for Internet Explorer:
cssSandpaper.

Rotate page slowly via CSS

Is it possible to slowly rotate parts of a page (in this case a single class) via CSS? My current code:
.c1
{
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
}
Unfortunately there is no way to use javascript for this, with the amount of access I have.
Is there a way to rotate this class on rollover or if the mouse is on top of it, or just simply rotate? This must be done entirely via CSS.
Thanks for the help! I know this is a strange request, but I hope to find an answer.
For Firefox :
-moz-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);
For Chrome , Safari and Opera :
-webkit-transform: rotate(15deg) scale(1.25, 0.5);
And Internet Explorer Doesn't support this :]
There are some good hints and tips on this page for Firefox. :)
Something like:
.transformed {
-webkit-transform: rotate(15deg) scale(1.25, 0.5);
-moz-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);
}
Which is what you have, but note that Firefox only supports it from v3.1 and up. :)

Resources