li marker character color not updating in chrome

Question

I have a <ul> with a handful of <li>s. I'm adding classes to the <li>s with a very basic bit of js. (This is an example for illustrating the possible bug, not my actual use case).

In FF, IE, Safari, the class .good or .bad is added, and the <li> and <a> colors are updated.

However, in Chrome the class is added, the <a> color is updated, but the <li> color stays the same. Browser Inspector shows the li character color is the color specified in the class, however the actual window shows the old color. Toggling any class attribute with the browser inspector causes the window to re-render, with the correct colors. Likewise with resizing the codepen results window.

View a CodePen here: http://codepen.io/fontophilic/pen/EVmbWd

setTimeout(function(){
  document.getElementById("bar").classList.add("bad");
  document.getElementById("test").classList.add("good");
  document.getElementById("foo").classList.add("good");
  document.getElementById("whatevs").classList.add("good");
}, 3000);

    ul li {
  color: black;
}
ul li a {
  color: black;
}
ul li.good {
  color: green;
}
ul li.good a {
  color: green;
}
ul li.bad {
  color: red;
}
ul li.bad a {
  color: red;
}

<ul>
    <li>              <a href="#" class="">First</a></li>
    <li id="test">    <a href="#" class="">Two</a></li>
    <li id="foo">     <a href="#" class="">The Third</a></li>
    <li>              <a href="#" class="">Quatro</a></li>
    <li id="bar">     <a href="#" class="">Fiver</a></li>
    <li>              <a href="#" class="">Six</a></li>
    <li id="whatevs"> <a href="#" class="">Seven</a></li>
</ul>

Important to note, if the <li>s have the classes applied on page load, display is as expected: http://codepen.io/fontophilic/pen/XmRqqJ

Any ideas on how to get Chrome to re-render the li color? Is this a known bug?

I’d probably just try and use generated content to place a bullet before the `li`, instead of `list-style` … — CBroe, Oct 06 '15 at 21:57
Yes @CBroe, that is probably what I'll end up doing for now. Seems silly to accommodate a modern browser for a CSS1 property. — fontophilic, Oct 07 '15 at 13:06

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I still believe this to be a chromium/webkit bug, but for now I've found an acceptable solution. I force Chrome to re-render the element by modifying the box by adding and removing a 1px transparent border.

setTimeout(function(){
  document.getElementById("bar").classList.add("bad");
  document.getElementById("test").classList.add("good");
  document.getElementById("foo").classList.add("good");
  document.getElementById("whatevs").classList.add("good");
}, 3000);

ul {
  width: 150px;
}
ul li {
  list-style: disc;
  color: transparent;
}
ul li a {
  color: black;
  display: block;
  border-top: 1px solid transparent;
}
ul li.good {
  background-image: none;
  color: green;
  border-top: 1px solid transparent;
}
ul li.good a {
  color: green;
  border-top: 0px solid transparent;
}
ul li.bad {
  color: red;
  border-top: 1px solid transparent;
}
ul li.bad a {
  color: red;
  border-top: 0px solid transparent;
}

<ul>
    <li>              <a href="#" class="">First</a></li>
    <li id="test">    <a href="#" class="">Two</a></li>
    <li id="foo">     <a href="#" class="">The Third</a></li>
    <li>              <a href="#" class="">Quatro</a></li>
    <li id="bar">     <a href="#" class="">Fiver</a></li>
    <li>              <a href="#" class="">Six</a></li>
    <li id="whatevs"> <a href="#" class="">Seven</a></li>
</ul>

Update

Based on this stackoverflow question, I've improved my solution and eliminated the crufty css. hiding and showing the parent element will force a redraw of its children. For whatever reason, using jQuery's show/hide worked, and vanilla js show/hide did not. This is confusing, but seemingly true.

setTimeout(function(){
  
  document.getElementById("bar").classList.add("bad");
  document.getElementById("test").classList.add("good");
  document.getElementById("foo").classList.add("good");
  document.getElementById("whatevs").classList.add("good");
  $("#woot").hide().show(0);     

  
}, 3000);

ul li {
  color: black;
}
ul li a {
  color: black;
}
ul li.good {
  color: green;
}
ul li.good a {
  color: green;
}
ul li.bad {
  color: red;
}
ul li.bad a {
  color: red;
}

<ul id="woot">
  <li>              <a href="#" class="">First</a></li>
  <li id="test">    <a href="#" class="">Two</a></li>
  <li id="foo">     <a href="#" class="">The Third</a></li>
  <li>              <a href="#" class="">Quatro</a></li>
  <li id="bar">     <a href="#" class="">Fiver</a></li>
  <li>              <a href="#" class="">Six</a></li>
  <li id="whatevs"> <a href="#" class="">Seven</a></li>
</ul>

li marker character color not updating in chrome

1 Answers1

Update