Modifica dinamica del colore di un elemento li non cambia il colore del punto elenco

Question

In Chrome (versione 45.0.2454.101 m) se aggiungo una classe a un elemento dell'elenco per cambiarne il colore, il colore del punto elenco è solo aggiornato quando la finestra viene ridipinto (ridimensionato)

$("#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>

E 'un bug in Chrome che può essere risolto con il codice? (o si tratta di un bug?)

Answer 1

Probabilmente si tratta di un errore ma non mi affiderei agli elementi del disco standard.

È possibile utilizzare CSS :: before invece pseudo-elemento. È molto più configurabile ed è completamente sotto il tuo controllo.

$("#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

Si potrebbe forzare il ridisegno utilizzando un'animazione CSS falso fino a quando questo bug è stato corretto.

$("#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>

In alternativa, è possibile utilizzare:

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