:visible broken in IE8 on element following a display:inline

[geoffreyk]

Attached is a test file. To repro the bug, load the file in different browsers. All browsers except IE8 report 1 visible div and class .bbb is not visible. IE8 report 2 visible divs and .bbb is visible.

This is as boiled-down as I can get it. The same bug happens using elements other than div.

This is triggered by .aaa with display:inline preceding .bbb. Without display:inline, this test works as expected

The problem seems to be in this line in sizzle (the same problem seems to be happening with the nightly build)

Sizzle.selectors.filters.visible = function(elem){

return elem.offsetWidth > 0

elem.offsetHeight > 0;

};

IE8, in this case only, is reporting the true width and height even though the element is hidden. All other browsers report height and width of 0 when element is hidden

I have set the Priority to 'major' even though I think it might be worthy of 'critical'. I believe that :visible is an important feature of jQuery, and to be not reliable in such a simple situation in IE8 is a problem that must be addressed.

[geoffreyk]

IE8 visible after inline

[dmethvin]

The IE8 debugger reports that the display:none div is 4x17 pixels! If you select that div in the debugger it shows the div as being at the end of the inline div. However, if you set the backgroundColor the supposed 4x17 area does not change color.

If the preceding inline div is changed to block, the hidden div correctly shows 0x0 pixels.

IE deserves a big lump of coal for this one.

[geoffreyk]

Yeah, but what are we going to do about it? I would hate to add a check just for IE8 in this routine

[geoffreyk]

Possible solution: add an extra term to the logic in Sizzle.selectors.filters.hidden

I am not sure if this will break the fix that was included for ticket #4512. It does seem to fix this specific problem.

change (width !== 0 && height !== 0 && !force) ?

to

(width !== 0 && height !== 0 && !force && jQuery.curCSS(elem, "display") !== "none") ?

Complete function:

Sizzle.selectors.filters.hidden = function(elem) {

var width = elem.offsetWidth, height = elem.offsetHeight, force = /^{tr$/i.test(elem.nodeName); ticket #4512 return (width === 0 && height === 0 && !force) ?}

true :

(width !== 0 && height !== 0 && !force) ?

false :

!!(jQuery.curCSS(elem, "display") === "none");

};

to:

Sizzle.selectors.filters.hidden = function(elem) {

var width = elem.offsetWidth, height = elem.offsetHeight, force = /^{tr$/i.test(elem.nodeName); ticket #4512 return (width === 0 && height === 0 && !force) ?}

true :

(width !== 0 && height !== 0 && !force && jQuery.curCSS(elem, "display") !== "none") ?

false :

!!(jQuery.curCSS(elem, "display") === "none");

};

[geoffreyk]

or perhaps targeting a bit more directly for IE

(width !== 0 && height !== 0 && !force && ((elem.currentStyle) ? elem.currentStyle.display !== 'none' : true)) ?

Not sure which approach would be better

[john]

I'm having a really hard time duplicating this problem in IE 8, even with the provided test case.

I uploaded it here:  http://ejohn.org/files/bugs/inline/IE8_visible_after_inline.html

And I keep getting 1 found div and .bbb is not visible (which is the correct output).

[geoffreyk]

Strange. I just verified this on three other IE8 machines from your page and got the expected buggy output. visible divs = 2 and bbb visible is visible. were you somehow in ie7 mode? something else?

[geoffreyk]

*Note, this may not be a bug in XP + IE8. Has been verified with Vista + IE8 and Win7 + IE8

[john]

See also #5732.

[bvrob]

FYI - I can confirm that this bug will reproduce on XP SP3 + IE8 (8.0.6001.18702).

Fortunately, I can work around this in my case by replacing "$(...).is(':visible')" with "$(...).css('display') !== 'none'".

[snover]

This should be fixed in 1.4.3 and later.

[snover]

Duplicate of #4512.

[kralco626]

Replying to geoffreyk:

*Note, this may not be a bug in XP + IE8. Has been verified with Vista + IE8 and Win7 + IE8

I did not officially test it with this test case, but I have the same issue in xp + ie8.