Динамическое изменение цвета элемента li не изменяет цвет точки пули

В Chrome (версия 45.0.2454.101 м), если я добавлю класс в элемент списка, чтобы изменить его цвет, цвет точки пули обновляется только тогда, когда окно перерисовывается (изменено)

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

Ответы

Ответ 1

Возможно, это ошибка, но я не буду полагаться на стандартные элементы диска.

Вместо этого вы можете использовать CSS:: перед псевдоэлементом. Он намного более настраивается и полностью находится под вашим контролем.

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

Ответ 2

Вы можете заставить repaint использовать фальшивую анимацию CSS до тех пор, пока эта ошибка не будет исправлена.

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