Side navigation
#8346 closed bug (fixed)
Opened February 22, 2011 12:02PM UTC
Closed March 30, 2011 06:55PM UTC
Last modified March 09, 2012 06:51AM UTC
jQuery.camelCase() & jQuery.css() incompatible with IE prefixed properties
Reported by: | lrbabe | Owned by: | lrbabe |
---|---|---|---|
Priority: | low | Milestone: | 1.5.2 |
Component: | css | Version: | 1.5.1rc1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
My computer is too old to install Vista and IE9 in a VM, but I'm pretty sure that this fiddle will fail in IE9: http://jsfiddle.net/AqxWY/1
The reason is that Microsoft exposes it's vendor prefixed properties as elem.style.msTranform instead of elem.style.MsTransform
The regular expressions that succesfully convert -moz-transform to MozTransform and vice versa are failing in IE9.
I doubt that we can ask Microsoft to fix their browser now that it's in RC, but we could ask them to mirror all their current properties to the correct ones like Webkit does (both webkitTransform and WebkitTransform work).
Otherwise we might have to apply a dirty patch to our regexps...
Although cssHooks handle browser normalization, most of them rely on jQuery.css() to get the computed value of the vendor prefixed property and thus fail in IE9.
Louis-Rémi
Attachments (0)
Change History (12)
Changed February 22, 2011 01:17PM UTC by comment:1
Changed February 23, 2011 12:25AM UTC by comment:2
component: | unfiled → css |
---|---|
milestone: | 1.next |
owner: | → lrbabe |
priority: | undecided → low |
status: | new → pending |
After checking your report and trying your test case with IE9RC I can only partially reproduce your issue.
With this test case I verified that passing -ms-transform
and MsTransform
to .css()
both work when reading. And that passing msTransform
actually doesn't work.
That's because css()
uses curCSS()
which in IE9 is getComputedStyle
and thus actually looks for computedStyle.getPropertyValue( name )
(where name is -ms-transform
).
The output when accessing -ms-transform/MsTransform
with css()
is matrix(1, 0, 0, 1, 10, 10)
in both cases. When accessing msTransform
no value is returned.
Although when you try to set a value via .css()
both -ms-transform
and MsTransform
fail and msTransform
works. As internally style[ name ] = value
is done (where name is MsTransform
). But providing a set-cssHook for MsTransform
makes it possible to workaround this issue (see my test case).
So I think this is a non-issue, will close if you confirm.
Changed February 23, 2011 02:44PM UTC by comment:3
status: | pending → new |
---|
My first comment was important, but not very clear I concede.
You can implement cheap cssHooks for modern browsers using only the jQuery.cssProps properties, here is an example for the text-shadow property: http://jsfiddle.net/PKnFZ/4/
This hook works great in Firefox, Chrome and Safari. But it will fail in IE no matter what form of the property is set to cssProps: "-ms-box-shadow" and "MsBoxShadow" will fail when setting style, "msBoxShadow" will fail when getting computed style.
Moreover, deciding which form of the property to use in cssHooks can be confusing. Authors might want to access the raw DOM in their plugin, and sometime use jQuery methods.
I'll open a pull request to fix jQuery.camelCase(), but it might be worth trying to contact the IE team and see what they can do.
Lr
Changed February 23, 2011 03:03PM UTC by comment:4
oops, it's not jQuery.camelCase() that needs to be fixed, only the "rupper" regular expression used in jQuery.css()
Changed February 23, 2011 03:03PM UTC by comment:5
Here is the pull request: https://github.com/jquery/jquery/pull/243
Changed March 30, 2011 06:54PM UTC by comment:6
status: | new → open |
---|
Changed March 30, 2011 06:55PM UTC by comment:7
milestone: | → 1.5.2 |
---|---|
resolution: | → fixed |
status: | open → closed |
Landed.
Changed April 03, 2011 12:09AM UTC by comment:8
Testing with 1.5.2 it is still not possible to set these styles using the "-ms-*" names. "ms*" work properly.
http://jsfiddle.net/kpdecker/c72m4/1/
While there is a work around it seems that this may cause some confusion for developers who are used to using the -vendor- notation when setting these properties.
Changed May 03, 2011 02:28PM UTC by comment:9
I have same issue with css. ms-* have to be used instead of -ms-*. maybe the ticket should be reopened?
Changed May 03, 2011 03:48PM UTC by comment:10
Same issue as ^.
Not working in 1.5.2 for me either.
Changed July 31, 2011 08:53PM UTC by comment:11
Same as above, in 1.6.2. msTransform works, -ms-transform doesn't
Changed July 31, 2011 09:14PM UTC by comment:12
Same as above, see http://jsfiddle.net/jitter/CaZur/
If we get this fixed, we could even simplify cssHooks by filling only the jQuery.cssProps object.
Note that fixing jQuery.camelCase is not crucial anyway, as I don't expect much developers to create IE specific code such as: