.hide() on a new element does not work in safari

[tmm1]

Adding a new hidden element to the DOM using .append() does not work as expected in Safari 3

$('body').append( $('<div>').text('hi').hide() )

will insert a new div which is not hidden. This is only with Safari 3, FF and IE work fine.

The following alternative does work in Safari:

$('body').append( $('<div style="display:none;">').text('hi') )

[tmm1]

This is due to the :visible selector being broken in Safari when an element is not part of the DOM yet.

[davidserduke]

This should work too:

$('body').append( $('<div/>').text('hi').css('display', 'none') )

[bmsterling]

This works: $('<div>').appendTo('body').hide().text('hi');

[emartin24]

Is there a fix that can be applied to jQuery for this, or is it just up to the developer to know about it and use a workaround?

If I do a append, then hide, there is the potential of a visible 'flicker' since the element will be displayed, then hidden.

Otherwise, as mentioned above, adding a direct css of display: 'none' will work and avoid the possible 'flicker'.

The third option being a way for jQuery to handle it so that we are abstracted from this Safari issue. This would be ideal since it would make hide() consistent across all browsers.

Thoughts?

[emartin24]

It looks like the failure is happening on:

jQuery.css(a,"display")!="none"

which is returning false.

What about something as simple as adding a browser sniff (for lack of a better idea ;) ):

($.browser.safari

jQuery.css(a,"display")!="none")

selector.js:

• visible: function(a){return "hidden"!=a.type&&jQuery.css(a,"display")!="none"&&jQuery.css(a,"visibility")!="hidden";},

+ visible: function(a){return "hidden"!=a.type&&($.browser.safari

jQuery.css(a,"display")!="none")&&jQuery.css(a,"visibility")!="hidden";},

[emartin24]

Well, I've been looking at it more and it looks like the issue comes from core.js (891-906):

// Go through and make them visible, but in reverse
// (It would be better if we knew the exact display type that they had)
for ( var i = 0; i < stack.length; i++ )
	if ( color( stack[ i ] ) ) {
	alert(stack[ i ].style.display);
		swap[ i ] = stack[ i ].style.display;
		stack[ i ].style.display = "block";
	}

// Since we flip the display style, we have to handle that
// one special, otherwise get the value
ret = name == "display" && swap[ stack.length - 1 ] != null ?
	"none" :
	( getComputedStyle && getComputedStyle.getPropertyValue( name ) ) || "";

// Finally, revert the display styles back
for ( var i = 0; i < swap.length; i++ )
	if ( swap[ i ] != null )
		stack[ i ].style.display = swap[ i ];

I haven't gone through it yet to see if a fix is possible, but it seems to be where the root of the issue comes from.

[codeword]

I am having this problem as well.

We are using closures in an object mother to build out our html for testing and it is not possible to wait until the elements are attached the dom before manipulating them.

I can use the '<div style="display:none;">' approach however.

[john]

Duplicate of #1239.