Side navigation
#6199 closed bug (duplicate)
Opened March 02, 2010 11:19AM UTC
Closed October 07, 2010 09:18PM UTC
: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: | erlichmen@gmail.com | |
| Blocked by: | Blocking: |
Description
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.
Attachments (4)
Change History (8)
Changed March 02, 2010 05:46PM UTC by comment:1
| component: | core → fx |
|---|---|
| resolution: | → invalid |
| status: | new → closed |
Changed March 02, 2010 09:41PM UTC by comment:2
| resolution: | invalid |
|---|---|
| status: | closed → reopened |
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 June 17, 2010 02:19PM UTC by comment:3
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.
Changed June 17, 2010 02:38PM UTC by comment:4
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.
Changed June 26, 2010 06:21AM UTC by comment:5
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 September 02, 2010 10:55AM UTC by comment:6
Another testcase file (1.html) for this bug.
Changed September 16, 2010 05:29PM UTC by comment:7
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.
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.