Skip to main content

Bug Tracker

Side navigation

#5670 closed bug (duplicate)

Opened December 16, 2009 11:56PM UTC

Closed October 31, 2010 08:44AM UTC

Last modified March 10, 2012 11:33AM UTC

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

Reported by: geoffreyk Owned by:
Priority: major Milestone: 1.4.2
Component: core Version: 1.4.1
Keywords: :visible IE8 inline Cc:
Blocked by: Blocking:
Description

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.

Attachments (1)
Change History (13)

Changed December 17, 2009 03:21AM UTC by dmethvin comment:1

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.

Changed December 17, 2009 04:58AM UTC by geoffreyk comment:2

Yeah, but what are we going to do about it?

I would hate to add a check just for IE8 in this routine

Changed December 17, 2009 05:50PM UTC by geoffreyk comment:3

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");

};

Changed December 17, 2009 05:55PM UTC by geoffreyk comment:4

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

Changed January 06, 2010 04:57PM UTC by john comment:5

component: unfilledcore

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).

Changed January 06, 2010 07:51PM UTC by geoffreyk comment:6

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?

Changed January 12, 2010 10:17PM UTC by geoffreyk comment:7

***Note, this may not be a bug in XP + IE8.

Has been verified with Vista + IE8 and Win7 + IE8

Changed February 07, 2010 02:09PM UTC by john comment:8

See also #5732.

Changed February 07, 2010 02:09PM UTC by john comment:9

milestone: 1.41.4.2
version: 1.4a11.4.1

Changed July 06, 2010 02:56PM UTC by bvrob comment:10

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'".

Changed October 31, 2010 08:44AM UTC by snover comment:11

resolution: → duplicate
status: newclosed

This should be fixed in 1.4.3 and later.

Changed October 31, 2010 08:44AM UTC by snover comment:12

Duplicate of #4512.

Changed May 10, 2011 10:28AM UTC by kralco626 comment:13

Replying to [comment:7 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.