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 comment:1
Changed December 17, 2009 04:58AM UTC by 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 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 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 comment:5
| component: | unfilled → core |
|---|
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 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 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 comment:9
| milestone: | 1.4 → 1.4.2 |
|---|---|
| version: | 1.4a1 → 1.4.1 |
Changed July 06, 2010 02:56PM UTC by 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 comment:11
| resolution: | → duplicate |
|---|---|
| status: | new → closed |
This should be fixed in 1.4.3 and later.
Changed October 31, 2010 08:44AM UTC by comment:12
Duplicate of #4512.
Changed May 10, 2011 10:28AM UTC by 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.
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.