Css counter-reset проблема в Safari

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

Вот скрипка

Answer 1

Нашел этот связанный пост SO: Как заставить WebKit перерисовать / перекрасить для распространения изменений стиля?

Кажется, что в стремлении быть быстрым и эффективным браузеры иногда используют ярлыкипри оценке 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='';

}

Вот обновленная скрипка