selenium isVisible method not working as expected - selenium

Question

I am opening this page http://www.ebay.com/itm/Apple-iPhone-5-16GB-White-Silver-Factory-Unlocked-/151097083750?pt=Cell_Phones&hash=item232e168766
and checking to see if the blue ribbon is visible as mentioned in the image
Here is my test
<tr>
<td>open</td>
<td>/itm/Apple-iPhone-5-16GB-White-Silver-Factory-Unlocked-/151097083750?pt=Cell_Phones&hash=item232e168766</td>
<td></td>
</tr>
<tr>
<td>isVisible</td>
<td>//div[#class='vi-notify-msg']</td>
<td></td>
</tr>
And expecting it to fail but surprisingly it passes every time...what am i missing here?
EDIT:
I am expecting the test to fail because the ribbon takes time to appear after the page is loaded and the command isVisible executed before the ribbon is visible..so it should fail right?

Answer 1

If you look at the HTML, the element is there as the page loads. It's only styled to fade in after the page finishes loading, but from an HTML perspective, it's "visible" the entire time the page is loading:
As the page is loaded:
<div id="vi_notification" class="vi-notify-cmp" style="top:25%;">
<div class="vi-notify-container vi-notify-shadow">
<div class="vi-notify-icon vi-notify-icon-img"></div>
<div class="vi-notify-msg">28 people are viewing this item per hour.</div>
<div class="vi-notify-close">
<button id="vi_notification_cls_btn" class="vi-notify- close-btn">x</button>
</div>
</div>
</div>
Only after it fades out does the styling change to display:none:
<div id="vi_notification" class="vi-notify-cmp" style="top: 25%; left: 10px; display: none;">
<div class="vi-notify-container vi-notify-shadow">
<div class="vi-notify-icon vi-notify-icon-img"></div>
<div class="vi-notify-msg">28 people are viewing this item per hour.</div>
<div class="vi-notify-close">
<button id="vi_notification_cls_btn" class="vi-notify-close-btn">x</button>
</div>
</div>
</div>
If you look at the element as it loads using the Chrome Developer toolbar, you'll see where it is "visible", but the styling updates to slowly fade it in so our human eyes can see it.
This means that when the page is loading / loaded, the element will return as displayed. After it fades out, I would expect displayed to return false, since the styling on the parent div was changed to display:none.