:visible selector issue

Question

<ul id="portfolio" style="">
    <li class="thumb one-third column mrmrs" style="display: block;">
        content #1 here
    </li>
    <li class="thumb one-third column doof hidden" style="display: none;">
        content #2 here
    </li>
    <li class="thumb one-third column doof hidden" style="display: none;">
        content #3 here
    </li>
</ul>

This is my computed HTML source code where you can see 3 list-items where the first one has a style="display:block" whereas the other 2 has "display:none". Before that, just to let you guys know what I'm doing here, I am actually using JPages to create a pagination for the items I'm selling. And inside the jPages.js, there is a line to detect list-items to render which looks something like this.

this._items = this._container.children(":visible");

However, it renders all 3 elements despite it having a display:none attribute in it. So I did some debugging by including the following line of code to detect the display attribute's value and I found something rather suprising.

jQuery('ul#portfolio li').each(function(){
    console.log(jQuery(this).css('display'));
});

The output of this code is

block
block
block

Any ideas?