li 标记字符颜色未在 chrome 内更新

Question

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

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

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

在此处查看 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>s 在页面加载时应用了 classes，则显示如预期：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>

更新

基于此 Whosebug question，我改进了我的解决方案并消除了笨拙的 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>

li 标记字符颜色未在 chrome 内更新

li marker character color not updating in chrome

css

google-chrome

chromium

更新