Font color by classes on li are not rendered until unfocus in Chrome

Question

I have a very strange problem in jQuery/CSS an I'm not sure what's is going wrong here. Consider this minimal example:

#list li {
    color:#3c6174;
    cursor:pointer;
}

#list li.active {
    color:red;
}

<ul id="list">
    <li class="active"></li>
    <li></li>
    <li></li>
</ul>

$buttons = $("#list li");
$buttons.click(function() {
    $buttons.removeClass("active");
    $(this).addClass("active");
});

View the code (fiddle here) in Chrome and click on one of the list buttons. Nothing happens. But, if you unfocus the window, it suddenly activates the class and the red color is rendered.

It seems to work fine in Firefox how it's supposed to be: as soon as a list item is clicked, it's color is switched to red and the others are blue again.

Viewing the DOM shows that the class is removed and added on the clicked element without any sort of delay, so I don't understand why it is not rendered immediately.

What is happening here?

PS: Using 33.0.1750.146 m on Windows Prof x64

Answer 1

I think the new version of Chrome considers that nothing needs to be redrawn if tags are empty and the only change is the class is the text color. Put a letter inside every li element and it works. Or: Place border:1px solid red; inside the CSS rule. It works because it has to do with the box properties of the element.