具有动态子元素的 Css 嵌套计数器

Question

我在嵌套菜单中使用了 css 计数器。 自从 chrome 65 开始出现奇怪的错误。 基本上当子菜单项动态出现时， 计数器开始泄漏到父级的同级元素。

<style>
  ul {
    counter-reset: test;
  }

  ul li::before {
      counter-increment: test;
      content: counters(test, ".") " ";
  }
</style>

<button onclick="document.getElementById('submenu').style.display='none';">HIDE</button>
<button onclick="document.getElementById('submenu').style.display='block';">SHOW</button>

<ul>
  <li>aaaa
    <ul id="submenu" style="display:block;">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>    
  </li>
  <li>bbbb</li>
  <li>cccc</li>
</ul>

https://jsfiddle.net/6ouvzhvd/14/

打开页面initialy时看到一个计数器，是正确的:

这是动态显示时的样子(点击隐藏 -> 显示):

还有其他人在使用最新的 chrome 时遇到过这个问题吗？ 谢谢!

Answer 1

是的，这是 Chrome Bug。此处记录:https://bugs.chromium.org/p/chromium/issues/detail?id=822260 (这就是我找到你的帖子的方式)。