Test case for jQuery Ticket 7978

fadeIn in Chrome fails

HTML

<ul id="goo">
    <li class="foo">
       Html Css
        <!-- adding other non-floated nodes to the list item makes it work -->
    </li>
</ul>
<ul id="goog">
    <li class="foos">
       Html Css
        <!-- adding other non-floated nodes to the list item makes it work -->
    </li>
</ul>

CSS

.bar {
    padding: 5px;
    background-color: orange;
}
    /* removing float makes it work */
    .bar{float: left;}
    
    /* setting default opacity to a value other than 1 makes it work
    opacity: 0.99; */


/* changing display mode to block or inline-block instead of list-item makes it work*/
.foo { display: block; }

JavaScript

jQuery('#goo').hide();
jQuery('#goog').hover(
        function(){
            jQuery('#goo').stop(true, true).fadeIn(700);
        },function(){
            jQuery('#goo').stop(true, true).fadeOut(700);
        }
    );