Jquery: visible selector not working on webkit

Question

I need to select one visible span in the list inside the div like this: $('#videoDesc > span:visible') or $('#videoDesc > span').filter(':visible') and it does not work in webkit

These span elements have display: none; set in style (I tested removing this and didn't change anything). In the style tag of one of them, I set its display to a string.

The display of span elements is changed using the jQuery show () and hide () functions.

If I call $('#videoDesc > span:hidden'); from the chrome console, every time I get all the elements, no matter which of them I called show() on. Similar to $('#videoDesc > span:visible'); gets an empty list: [] everytime.

In firefox and IE I do not have this problem.

I copied this from the chrome console. Since you can see the span element, VideoDesc-1 has style="display: inline;" , and it still appears when using :hidden

 $('#videoDesc > span').filter(':hidden'); [<span id="videoDesc-1" style="display: inline;">…</span> , <span id="videoDesc-2">…</span> , <span id="videoDesc-3">…</span> , <span id="videoDesc-4">…</span>] 

Is this some kind of webkit bug?

I managed to get around this:

 $('#videoDesc > span').each(function(i, e) { if (this.style.display != 'none') { ... } }); 

But this bothers me as it seems like the wrong solution, the correct use :visible , but it just doesn't work on webkit

jQuery 1.6.4

Answer 1

I have the exact problem using paginator using jQuery .show() and .hide() to hide or show my elements. This is really a problem with chrome, considering display:inline hidden.

I solved this by replacing this:

 $(whatever).filter(':visible'); 

:

 $(whatever).filter(function(){ return $(this).css('display') != 'none';}); 

---

or in a function for reuse:

 $(whatever).filter(visibleFilter); function visibleFilter(){ return $(this).css('display') != 'none'; } 

This is really a fix for Chrome and IE since it works fine on Firefox ... I hope this can help other people having the same problem!

Answer 2

Could you check this: http://jsfiddle.net/FRFpH/

Unable to reproduce your problem (both in IE, and in Chrome and FF): /

Answer 3

The :hidden selector has more than a simple comparison of 'display' != 'hidden' .

According to jQuery docs element :hidden if:

• They have no CSS display value.
• These are form elements with type = "hidden".
• Their width and height are explicitly set to 0.
• The ancestor element is hidden, so the element is not displayed on the page.

In particular, the last pool that mentions the ancestral region seems important to check if you have problems with the :hidden filter.

Disclaimer: Documents also contain numerous changes in different versions of jQuery regarding selector behavior.