CODEWITHSUNDEEP
jquerycssbrowsertransformrotation
JGDev
JGDev

Reputation: 261

jQuery ignores non-mozilla CSS3 transforms when using Firefox

I am trying to add CSS3 transforms to an element using jQuery. I am using Firefox 5 to test my code. My goal is to maximize browser compatibility by adding multiple versions of the transition for different browsers. Here is the code I'm using:

$('#element_name').css('-webkit-transform', 'rotate(45deg)');
$('#element_name').css('-moz-transform', 'rotate(45deg)');
$('#element_name').css('transform', 'rotate(45deg)');

When I view the resultant HTML using Firebug, I observe that only the -moz-transform has been added to the inline CSS for the element. This CSS works fine in Firefox, but I need the other lines added as well. I'm assuming that if I view the page in Safari it will display the -webkit-transform line, but that's not good enough for my project requirements. I need all of the different CSS transform lines to be added at the same time regardless of the browser.

Is there some way I can force jQuery to use them all? Perhaps there's some sort of configuration setting to tell jQuery not to care about the current browser?

Upvotes: 0

Views: 518

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117314

This is not caused by jQuery. jQuery makes no pre-check if a property is available in a browser.

Firebug will not show you the unknown properties, because the browser will not apply them when they are unknown. It's a kind of invalid assignment without triggering an error.

Assigning of invalid css-properties may only cause a warning in firebugs console, you can choose to show them by selecting the "show CSS-errors"-option from the console-menu).

Upvotes: 2

pasine
pasine

Reputation: 11543

What version of Firefox are you using? Did you try to temporary remove the -moz-transform declaration and see what happens?
I'm not sure, but sometimes firebug shows only the first useful declaration.

Upvotes: 1

Related Questions