Dynamically changing the color of an element li doesn't change the color of the bullet point

Question

In Chrome (Version 45.0.2454.101 m) if I add a class to a list element to change its color, the bullet point color is only updated when the window is repainted (resized)

$("#a").click(function() {    
   $("#a").addClass('blue');
});

ul li {
    color: red;
    list-style-type: disc;
    margin-left: 2em;
}
.blue {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li id="a">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
</ul>

Is it a bug in Chrome that can be solved with code? (or is it a bug at all?)

Answer 1

Probably it is a bug but I would not rely on the standard disc elements.

You could use CSS ::before pseudo-element instead. It is much more configurable and is fully under your control.

$("#a").click(function() {    
   $("#a").addClass('blue');
});

ul li {
    color: red;
    list-style-type: none;
    margin-left: 2em;
}

ul li::before {
    content: "•";
}

.blue {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li id="a">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
</ul>

Answer 2

You could force the repaint using a fake CSS animation until this bug has been fixed.

$("#a").click(function() {    
   $("#a").addClass('blue');
});

ul li {
    color: red;
    list-style-type: disc;
    margin-left: 2em;
    -webkit-animation:1ms foo infinite; /* using prefix for webkit only */
}
.blue {
    color: blue;
    
}

@-webkit-keyframes foo { /* using prefix for webkit only */
    from { zoom: 0.99999; }
    to { zoom: 1; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li id="a">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
</ul>

Alternatively, you could use:

$("#a").addClass('blue').hide().show(0);