Safari中的Css计数器重置问题

Question

我在动态属性的选择器中遇到了css counter-reset的问题，但仅限于Safari浏览器。

<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1" id="test" restart-numbering="true">para</p>
<p numbered="1">para</p>
<br><br><br>
<button onclick='toggle()'>
    Toggle
</button>

JS：

function toggle() {
let el = document.querySelector('#test');
let restarting = !!el.getAttribute('restart-numbering');
if (restarting) {
    el.removeAttribute('restart-numbering');
} else {
    el.setAttribute('restart-numbering', true);
  }
}

CSS：

p[numbered="1"] {
    counter-increment: numbered1;
}
p[numbered="1"]:before {
  content: counter(numbered1)'.';
}
p[numbered="1"][restart-numbering="true"] {
  counter-reset: numbered1;
}

第一次加载时，段号编号正确重置：1,2,3,4,1,2

按两次toggle按钮，这将html带到原始状态并获得1,2,3,4,4,5

Here is the fiddle

Answer 1

发现这个相关的S.O.帖子：How can I force WebKit to redraw/repaint to propagate style changes?

似乎为了快速有效，浏览器有时会在评估CSS时采用快捷方式。使用该帖子的答案我们可以修改小提琴来切换容器div上的一些道具，使浏览器更深入地评估CSS：

HTML：

<div id="container">
  <p numbered="1">para</p>
  <p numbered="1">para</p>
  <p numbered="1">para</p>
  <p numbered="1">para</p>
  <p numbered="1" id="test" restart-numbering="true">para</p>
  <p numbered="1">para</p>
</div>

JS：

function toggle() {

  let el = document.querySelector('#test');
  let restarting = !!el.getAttribute('restart-numbering');
  if (restarting) {
    el.removeAttribute('restart-numbering');
  } else {
    el.setAttribute('restart-numbering', true);
  }

  let ctr = document.querySelector('#container');
  ctr.style.display='none';
  ctr.offsetHeight; // no need to store this anywhere, the reference is enough
  ctr.style.display='';

}

Here's the updated fiddle