css - li 标记字符颜色未在 chrome 中更新

Question

我有一个 <ul>用一把 <li>秒。我正在向 <li> 添加类有一些非常基本的 js。 (这是说明可能的错误的示例，而不是我的实际用例)。

在 FF、IE、Safari 中，类 .good或 .bad已添加，<li>和 <a>颜色已更新。

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

在这里查看 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

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

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>

更新

基于此stackoverflow question ，我改进了我的解决方案并消除了笨拙的 css。隐藏和显示父元素将强制重绘其子元素。无论出于何种原因，使用 jQuery 的显示/隐藏有效，而 vanilla js 显示/隐藏无效。这令人困惑，但似乎是真的。

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>