Я получаю два разных начальных значения CSS в двух разных основных браузерах. ⇐ CSS

[Anonymous]

Я разрабатывал компонент React, который управляет массивом состояний. Для каждого элемента этого массива я использовал метод map, чтобы создать список элементов, содержащихся в элементе div с именем класса .container. Каждому элементу был присвоен класс .item. Вот CSS, который я использовал:

Код: Выделить всё

.item {
opacity: 0;
transition: opacity 1s;
}

.container:active .item {
opacity: 1;
}

Кроме того, я подключил к контейнеру прослушиватель событий mousedown. Когда пользователь нажимал левую кнопку мыши (и прежде чем ее отпустить), метод запускал добавление элемента в массив. Это действие перерисовало DOM и добавило новый элемент в качестве дочернего элемента контейнера.
Вот проблема: в браузерах на основе Chromium начальное значение непрозрачности для этого нового элемента равно 1< /code>, хотя CSS указывает, что это значение должно быть 0. Однако тот факт, что контейнер является «активным» (из-за нажатия пользователем кнопки мыши) во время рендеринга, может объяснить, почему его начальная непрозрачность равна 1 — поскольку CSS предписывает браузеру установить непрозрачность элемента на 1< /code>, когда контейнер «активен».
Однако в Firefox начальное значение непрозрачности равно 0! Следовательно, вместо интерполяции непрозрачности от 1 до 0, как это происходит в Chrome, она интерполирует от 0 до 1.
Это приводит к двум противоречивым поведениям между двумя основными браузерами: Chrome переходит от непрозрачности: 1 к непрозрачности: 0, тогда как Firefox переходит от непрозрачности: 0 к непрозрачности: 1. Я подозреваю, что это проблема конкретного браузера, но я хотел бы подтвердить это, прежде чем сообщать об ошибке и изучить возможные обходные пути.
Я создал воспроизводимый файл версия этой проблемы здесь: https://playcode.io/1938075

• Браузеры на базе Chromium: нажатие внутри синего прямоугольника появляется новый красный квадрат с исходным цветом фона CSS, установленным на красный, который становится прозрачным после отпускания кнопки мыши.
• Firefox : новый квадрат изначально кажется прозрачным, а затем становится красным.

Спасибо, что рассмотрели мой вопрос!
< strong>Изменить: я, вероятно, мог бы добиться такого же поведения с помощью JS, но я предпочитаю CSS из соображений производительности.
С Chrome:


С Firefox:



Подробнее здесь: https://stackoverflow.com/questions/787 ... r-browsers