1

I've codes below:

HTML body codes:

<div>asbcakjscb<div>

CSS codes:

div {
    width:400px;
    height:400px;
    background:red;
    -ms-transform:scale(.3);
}

JavaScript codes:

document.quertSelector('div').style.msTransform = 'scale(1)';

The JavaScript codes are run on the page's load event. You can run code above at: http://jsfiddle.net/fakjX

I need to change CSS3 transform scale style from 0.3 to 1 on IE9. But I can't. I think this is a IE9's bug. The codes appears no problem.

Do you agree this is a IE9's bug? Or do you have any solutions to fix this problem?

Thank you.

weilou
  • 4,419
  • 10
  • 43
  • 56
  • 1
    Did you mean `querySelector` instead of `quertSelector`? – Jonathan Rupp Jun 13 '11 at 11:55
  • Sorry. "quertSelector" is a spelling mistake. But what I mean is not about this. Please check out http://jsfiddle.net/fakjX/5. I use jQuery and wrote JS codes: `$('div').css('-ms-transform', 'scale(1)');`. It doesn't work. How do you think about this? Thank you. – weilou Jun 13 '11 at 12:03

1 Answers1

2

It's not a bug in IE, the dash notation is invalid when used in a script. You can use the camelCase equivalent and object notation when setting the property using jQuery.

Edit: Found another SO question on this subject - IE9: Why setting "-ms-transform" works from css, but not with jquery.css()

$('div').css({ msTransform: 'scale(1)' });
Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
  • your response makes use of jQuery, but the question doesn't indicate that jQuery is an option. Can you provide an example without a framework decency? – Rob Allen Jun 13 '11 at 12:12
  • The comment on the question is probably jQuery and the framework on the fiddle is definitely jQuery – andyb Jun 13 '11 at 12:13
  • @andyb Thank you for your help. It's pretty useful! Now I think this is a jQuery bug. `$('div').css('msTransform', 'scale(1)');` works well on IE9. `$('div').css('-webkit-transform', 'scale(1)')` works well on Chrome and Safari. `$('div').css('-moz-transform', 'scale(1)')` works well on Firefox. On official jQuery website (http://api.jquery.com/css), it says: Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: `$(elem).css('marginTop')` and `$(elem).css('marginRight')`, and so on. – weilou Jun 13 '11 at 12:33
  • This is a jQuery 1.6.1 bug that jQuery doesn't support `-ms-transform`. It should support. I think I'll report this bug to jQuery team later. – weilou Jun 13 '11 at 12:35
  • 1
    It's not a bug. It's just a _feature_ of IE9. See http://stackoverflow.com/questions/5594117/ie9-why-setting-ms-transform-works-from-css-but-not-with-jquery-css/5594170#5594170 for an explanation of _why_. Also (from a comment on that answer) `$('div').css({ 'ms-transform': 'scale(1)' });` seems to work. – andyb Jun 13 '11 at 12:50
  • Yeah, your codes work good. Thank you very much! Anyway, I've reported a bug to jQuery team at http://bugs.jquery.com/ticket/9572. Dash isn't a good practice in JS object property name. I will not use it. Thank you again! – weilou Jun 13 '11 at 13:09