Font color by classes on li is not displayed until in Chrome

Question

I have a very strange problem in jQuery / CSS and I'm not sure what 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 has happened. But, if you do not focus the window, it unexpectedly activates the class, and red color will be displayed.

Firefox seems to work just fine, as it should be: as soon as the list item is clicked, the color will switch to red and the rest will turn blue again.

Viewing the DOM shows that the class has been deleted and added to the element with a click without any delay, so I do not understand why it is not displayed immediately.

What's going on here?

PS: Using 33.0.1750.146 m on Windows Prof x64

Answer 1

I think the new version of Chrome believes that nothing needs to be redrawn if the tags are empty, and the only change is the class - the color of the text. Put a letter inside each li element and it works. Or: Border: 1px solid red; inside the CSS rule. It works because it relates to the window properties of an element.