li标记字符颜色不在chrome中更新

Question

我有<ul>一些<li> s。我正在使用一个非常基本的js来向<li> s添加类。 （这是一个用于说明可能的错误的示例，而不是我的实际用例）。

在FF，IE，Safari中，添加了课程.good或.bad，并更新了<li>和<a>颜色。

但是，在Chrome中添加了类，<a>颜色已更新，但<li>颜色保持不变。浏览器检查器显示li字符颜色是类中指定的颜色，但实际窗口显示旧颜色。使用浏览器检查器切换任何类属性会导致窗口以正确的颜色重新渲染。同样，调整codepen结果窗口的大小。

在此处查看CodePen：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>

需要注意的是，如果<li>在页面加载时应用了类，则显示符合预期：http://codepen.io/fontophilic/pen/XmRqqJ

有关如何让Chrome重新呈现li颜色的任何想法？这是一个已知的错误？

Answer 1

我仍然认为这是一个chrome / webkit错误，但是现在我找到了一个可接受的解决方案。我强制Chrome通过添加和删除1px透明边框来修改框来重新渲染元素。

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>

更新

基于此http://sourceforge.net/projects/jtds/，我改进了我的解决方案并消除了苛刻的CSS。隐藏和显示父元素将强制重绘其子元素。无论出于何种原因，使用jQuery的show / hide工作，而vanilla js show / hide则没有。这很令人困惑，但看似真实。

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>