Bug Tracker

Opened 12 years ago

Closed 11 years ago

#6199 closed bug (duplicate)

:hidden selector return false although div is actually hidden (IE8)

Reported by: erlichmen Owned by:
Priority: undecided Milestone: 1.4.3
Component: effects Version: 1.4.2
Keywords: Cc: [email protected]
Blocked by: Blocking:


I debugged a fadeIn that didn't fadeIn the div, I track the problem with the following lines of code:

<code> var width = elem.offsetWidth, height = elem.offsetHeight,

skip = elem.nodeName.toLowerCase() === "tr";

return width === 0 && height === 0 && !skip ?

true : width > 0 && height > 0 && !skip ?

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


this code assumes that if the width and height of a div is bigger then zero then the div is not hidden and there is no need to check the display style.

In my case the div *has* dimensions but display is set to none. The fadeIn animation doesn't work because it assumes that since the div is not hidden there is no need to remove the display:none from the style.

Attachments (4)

jQueryOrIE8_Bug.htm (1.4 KB) - added by erlichmen 12 years ago.
1.html (786 bytes) - added by nalobin 11 years ago.
:hidden selector bug in IE8
slide_test.html (3.1 KB) - added by fidian 11 years ago.
My test file, probably bigger than necessary a bit
jquery-1.4.2-ie8.js (920 bytes) - added by fidian 11 years ago.
Plugin to fix behavior in IE8.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 12 years ago by john

Component: corefx
Resolution: invalid
Status: newclosed

Do you have an example that we can look at? What element is it? What styling does it have? Please re-open the ticket with those details.

comment:2 Changed 12 years ago by erlichmen

Resolution: invalid
Status: closedreopened

I'm attaching the a repro of the bug, everything is inline into the file (me hope) except jQuery.

Open the file and you will see a blue rectangle, hover the mouse over the rectangle and a green rectangle will appear in the gray area, when the mouse leaves then the green rectangle disappear. On Chrome (5) and FF3.6 it will continue to appear/disappear according to the mouse location, on IE8 it will not; after the mouse leaves the blue rectangle then the green rectangle will no longer appear.

Changed 12 years ago by erlichmen

Attachment: jQueryOrIE8_Bug.htm added

comment:3 Changed 11 years ago by Pointy

Also see this test (taken from a Stackoverflow question): http://gutfullofbeer.net/visible.html

That test file involves an <a> tag with explicit "display: none" in its style. IE8 reports its offsetHeight and offsetWidth as non-zero numbers, so the jQuery routine reports it as being visible.

comment:4 Changed 11 years ago by Pointy

Oh, also: the IE8 behavior seems to depend on what security zone the page is in. If you try this with the test page in the "Local Intranet Zone", then the browser reports height and width for the element as 0. Weird.

comment:5 Changed 11 years ago by meyerovb

This is caused by an element being surrounded by two visible elements. If a display none element is the only one in a container it returns correctly, place a visible element before and after it at the same level (in the same container) and it returns incorrectly, as ie8 says it has a non-0 offsetheight and offsetwidth. See the second post for example code: http://forum.jquery.com/topic/hidden-visible-broken-in-ie8

Changed 11 years ago by nalobin

Attachment: 1.html added

:hidden selector bug in IE8

comment:6 Changed 11 years ago by nalobin

Another testcase file (1.html) for this bug.

Changed 11 years ago by fidian

Attachment: slide_test.html added

My test file, probably bigger than necessary a bit

comment:7 Changed 11 years ago by fidian

I've played a bit and with my test file, I can make the slide work in four different ways:

1) Make the trigger (in this case, it is an <A> tag) use "display: block" instead of "display: inline-block".

2) Add text to the <A> tag.

3) Wrap the div in anything (already mentioned in this ticket)

4) Add an empty comment before the div I'm sliding.

The slide_test.html displays various things I wanted to see while it slides the things around - there's a window.setInterval(.., 1) in there, so it isn't overly nice to your CPU, but the updates are pretty. There's also jQuery code to implement the 4 fixes in my test page.

I noticed that the bad behavior is if the previous element exists, and didn't see any change if the following element existed or not.

I've also made a jQuery plugin to fix this problem for IE8, but I don't know how nice it will be. Whenever an element is scanned for :hidden, it will check if the previous element either doesn't exist or if it isn't a comment. If it is deemed in a "bad" scenario, it will prepend a comment to the element we are testing. So, if you do $(':hidden'), you will get a TON of comments added to your DOM. Not ideal. If the browser is not IE8, the plugin doesn't change anything.

I hope this information and maybe the plugin can help to find a better solution for jQuery 1.4.3.

Changed 11 years ago by fidian

Attachment: jquery-1.4.2-ie8.js added

Plugin to fix behavior in IE8.

comment:8 Changed 11 years ago by snover

Priority: undecided
Resolution: duplicate
Status: reopenedclosed

Duplicate of #4512.

Note: See TracTickets for help on using tickets.