Почему не работает связка counter, calc и var?

Question

Сделал связку calc и var, как написано в документации MDN. Хочу её использовать для организации динамической прозрачности элементов, для чего использую counter, также в соответствии с документацией. Написал код, но переменная --msgO не получает никакого значения:

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#worldGen {
  overflow: hidden;
  height: 100%;
}

#worldMap {
  background-color: blue;
  z-index: 1;
  width: 17000px;
  height: 8000px;
}

#genLog {
  position: absolute;
  width: 100%;
  bottom: 0;
  counter-reset: msg;
}

#genLog p {
  width: 100%;
  display: block;
  z-index: 2;
  text-align: center;
  color: white;
}

#genLog p:nth-last-child(n) {
  --msgC: counter(msg);
  --msgO: calc(1 / var(--msgC));
  opacity: var(--msgO);
  counter-increment: msg;
}

#genLog p::after {
  content: var(--msgC);
}

<main id="worldGen">
    <canvas id="worldMap"></canvas>
    <section id="genLog">
      <p>
    Cообщение
    </p>
    <p>
    Cообщение
    </p>
    <p>
    Cообщение
    </p>
    </section>
</main>

Если заменить var(--msgC) в

--msgO: calc(1 / var(--msgC));

на статичное число так:

--msgO: calc(1 / 2);

то всё работает. var(--msgC) также возвращает корректное значение, что видно по результатам работы стиля #genLog p::after. Не работает только связка calc и var, описанная в документации, как однозначно рабочая. Что я делаю не так?

БЛОГ НА HUSL

Почему не работает связка counter, calc и var?

Ответы (0 шт):