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

[erlichmen]

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

</code>

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.

[john]

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.

[erlichmen]

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.

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

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

[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

[nalobin]

:hidden selector bug in IE8

[nalobin]

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

[fidian]

My test file, probably bigger than necessary a bit

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

[fidian]

Plugin to fix behavior in IE8.

[snover]

Duplicate of #4512.