jquery :visible selector not working on webkit

Question

I need to select the one visible span element in a list inside a div like so: $('#videoDesc > span:visible') or $('#videoDesc > span').filter(':visible') and it doesn't work in webkit

These span elements have display: none; set in the stylsheet (I tested removing this and nothing changed). On the style tag of one of them I set its display to inline.

The span elements display is modified using jQuery's show() and hide() functions.

If I call $('#videoDesc > span:hidden'); from the chrome console I get all the elements everytime, doesn't matter which of them I've called show() on. Likewise $('#videoDesc > span:visible'); gets me an empty list: [] everytime.

In firefox and IE I don't have this problem.

I copied this from the chrome console. As you can see span element videoDesc-1 has a 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 sort of webkit bug?

I was able to work around it doing this:

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

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

jQuery 1.6.4

Answer 1

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

I solved it by replacing this :

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

by this :

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

---

or in a function for reutilisation :

$(whatever).filter(visibleFilter);

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

This is really a fix for chrome and IE as it works on Firefox normally... I hope this can help other people, having the same problem!