jQuery.css(this, 'display') on a detached element is inconsistent across browsers

[davidtwtong@…]

in Chrome and IE, jQuery.css(this, 'display') reports on a detached element. However, in FF (I tested it on 3.6), it reports the default value of an element, such as 'block' for div.

I have a detached div#files, and in CSS it is defined as #files(display:table-cell)

The result is that, in jQuery's hide() function, jQuery._data( this[i], "olddisplay", display ) stores 'block' for a detached div, and so upon .show() it would become a block element. What I wanted is to retain its CSS style defined in the CSS file.

[anonymous]

 http://jsfiddle.net/davidtong/gxNeD/

Try it in Chrome/IE and then in FF. The red console div should be empty in Chrome/IE, but in FF it says 'block'

[rwaldron]

Thanks for the dup!

[rwaldron]

Duplicate of #10416.

[anonymous]

My workaround:

var old_display = j_div.css('display'); cache custom display value (e.g. display:table-cell)

j_div.detach().hide(); upon detach, j_div.css('display') returns 'block' even if we set display:table-cell in the CSS

$j._data(j_div[0], "olddisplay", old_display);