IE8 Standards mode JQuery illogic

Question

I have a JQuery (using JQuery 1.4.2) problem that exhibits only in IE8 in standards mode, on one specific DOM element but not on other nearly identical dom ellements. The best example of why it makes no sense is below:

$('span.error:visible')[0].style.display

The above piece of code returns "none" which unless i am having some sort of brain aneurism is impossible without there being a bug in either JQuery or IE8. This only occurs in IE8 in standards mode, not in any other browser or on IE8 compatiblity mode. The span that it finds is actually an ASP.net validation control so i only have a limited amount if control over what it renders to the browser. When i inspect the DOM using IE8 developer toolbar and copy the HTML from the DOM it gives me the below:

<SPAN style="DISPLAY: none; COLOR: red" 
id=ctl00_cphContentBody_mnMainMiddleNames_ebvMiddleName1 class=error
controltovalidate="ctl00_cphContentBody_mnMainMiddleNames_txtMiddleName0"
errormessage="JQuery should not find this" display="Dynamic" validationGroup="MiddleNames"
isvalid="true" validationexpression="[A-Za-z][A-Za-z '\-]*[A-Za-z]*">JQuery should not
find this</SPAN>

If i just do a view source and copy and paste it i get the below:

<span id="ctl00_cphContentBody_mnMainMiddleNames_ebvMiddleName1" class="error"
style="color:Red;display:none;">JQuery should not find this</span>

If i create a simple HTML file containing just either of the above pices of HTML then $('span.error:visible') does not find the spans and i am unable to post code to be able to reproduce this problem. But in the actual asp.net page if i run $('span.error:visible')[0].style.display it returns "none" and if i run $('span.error:visible').text() it returns "JQuery should not find this".

tl;dr How can $('span.error:visible')[0].style.display return "none".

Edit to answer Nicks comment.

$('span.error:visible')[0].offsetWidth returns 3 $('span.error:visible')[0].offsetHeight returns 22

Which is puzzling, i found the below on the Jquery site.

In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

THe element isn't visible, but acording to the above JQuery thinks it is.

What does this change mean? It means that if your element's CSS display is "none", or any of its parent/ancestor element's display is "none", or if the element's width is 0 and the element's height is 0 then an element will be reported as hidden.

So is the above just wrong. Display is "none" but offsetWidth and offsetHeight are not zero.

Answer 1

I wonder if this is something to do with visible vs hidden:

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

(from http://webdesign.about.com/od/css/f/blfaqhidden.htm)

Wwhat do the following give you?:

$('span.error:not(:hidden')[0].style.display

And

$('span.error:visible')[0].style.visibility

You could also look at the CSS in more detail by using the IE8 Developer Tools (F12).

Answer 2

This appears to be a browser bug, though whether jQuery should handle it is certainly up fo debate. The :visible selector is really just a reverse :hidden selector and it's checking if the element has a 0 for offsetHeight and offsetWidth (e.g. hidden being defined as "using no space in the page".

IE shouldn't allow display: none to have an offsetWidth and offsetHeight, so the root of the problem is there. Should jquery add handling for this? perhaps so, there's already a bug filed which may be exactly your issuehere.