I am using a css3 scale transform on hover, and I would like to recreate the effect for internet explorer users. Are there any smooth, similar functions to accomplish this? I looked at changing the width/height with percentages, but it didn't work well so I scraped that route.
2
-
1Users of crappy browsers are not used to beautiful things, do not break your code to make it compatible for them. It will only confuse them.fmsf– fmsf2013-02-28 14:38:48 +00:00Commented Feb 28, 2013 at 14:38
-
1You could either try filters or perhaps the zoom property.Christoph– Christoph2013-02-28 14:40:44 +00:00Commented Feb 28, 2013 at 14:40
Add a comment
|
3 Answers
Are you aware that transforms do work on IE9 with the -ms prefix?
Otherwise, have a look at jQuery and the hover function.
4 Comments
Joe Rätzer
Your original comment made me laugh though! :)
fmsf
tks but I don't clame credit for it, speaker said that in a jQuery conference :)
Joe Rätzer
Must have been an entertaining conference. I also agree with "if you can do it in CSS don't do it in JS", very true.
user1202292
Yes I have been using -ms for IE9, I was thinking for IE7, IE8 (even though the number of users are shrinking, there are still a lot of them, unfortunately).
You can use:
zoom: 2; /* IE */
-moz-transform: scale(2); /* Firefox */
-moz-transform-origin: 0 0;
-o-transform: scale(2); /* Opera */
-o-transform-origin: 0 0;
-webkit-transform: scale(2); /* Safari And Chrome */
-webkit-transform-origin: 0 0;
Also if you can do it in CSS don't do it in JS. CSS is hardware acelerated while JS is not.
Or as Joe-R pointed out you can use "-ms" prefix. Check it here: http://caniuse.com/#search=transform
-ms-transform: scale(2); /* Internet explorer*/
-ms-transform-origin: 0 0;
Comments
Because of the way that CSS3 handles it (by scaling every child element in a contain object that you choose) it would be very difficult to make without CSS3. You can always change the width, height, and font-size of things, and even animate it.
Comments
