jQuery .css() does not return properties for div elements not yet appended to DOM in Chrome

[[email protected]…]

​http://jsfiddle.net/nwSPW/

jQuery's .css() won't return the correct values for an element not yet appended to the DOM in Chrome, but it will in Firefox. See test case.

[addyosmani]

Confirmed in Chrome latest.

[Timmy Willison]

I'm not sure that's possible to fix if the native treatment of disconnected nodes differs. I think we'd have to connect the node to retrieve consistent css, but that could have a drastic impact on the page depending on the css applied to that node.

[mikesherov]

this is important to note that this is only for styles that haven't been directly applied to elements (i.e. styles applied due to a stylesheet, not inline styling).

Otherwise, this would just be the same as #10254 or #8388

[mikesherov]

Also important to note that for disconnected nodes, the value should be 10px in the example, as per CSSOM spec which says that margin/padding/border/width for elements that have a display of none (including disconnected nodes) should return 0px.

However, in IE: 0px (incorrect) in chrome: empty string (incorrect) in FF: resolved value (correct)

:-\

[mikesherov]

I'm taking this ticket as I'm advocating for it's fix in webkit proper. There will be no fix in jQuery though unless some miracle allows us to find a hack here.

[mikesherov]

Advocated: ​https://bugs.webkit.org/show_bug.cgi?id=14563#c12

[mikesherov]

So, I'm going to close this ticket as CANTFIX because this behavior is consistent across chrome, safari, opera, IE9, and IE10. Only Firefox exhibits the behavior you'd like. I will continue to advocate for this as the W3C and browser vendor level, but I can't promise anything, and there is no hack I've found in any of the browsers.