Единицы просмотра в конечном ключевом кадре CSS-анимации не пересчитываются в Safari

Question

Поле расширяется за счет анимации ключевых кадров (итерации: 1, fill-state: вперед) с ширины: 10vw до ширины: 20vw (конечный ключевой кадр). После окончания анимации окно не реагирует (при изменении размера окна) в Safari. В Chrome и Firefox он работает как положено.

Я пытался использовать префикс -webkit- и разделять свойства анимации, но безрезультатно. Я вынужден использовать js для изменения класса CSS после окончания анимации (код после фрагмента).

.box {
  width: 10vw;
  height: 100px;
  background: green;
  animation: widen 2s 1 forwards;
}

@keyframes widen {
  0% {
    width: 10vw;
  }
  100% {
    width: 20vw;
  }
}

<div id="box-id" class="box"></div>

Здесь - это кодовая ручка с закомментированным обходным решением js и разделенным сокращенным свойством анимации: он по-прежнему не работает должным образом,Вот обходной путь js, от которого я бы хотел избавиться:

CSS

.box2 {
    width: 20vw;
    height: 100px;
    background: green;
}

JS

document.getElementById("box-id").addEventListener('animationend', (e) => {
  e.target.classList.add("box2");
  e.target.classList.remove("box");
});

Я нашел много вопросов, связанных с сафари иключевые кадры, но я не смог найти ничего конкретного на адаптивных юнитах. Я хотел бы знать, если я делаю что-то не так, или есть известное исправление этого поведения. Заранее спасибо

Answer 1

Safari не читает через сокращенный метод описания анимации.

Вы можете попробовать:

.box{
     animation-name: widen;
     animation-duration: 2s;
     animation-timing-function: ease;
     animation-delay: 0s;
     animation-iteration-count: 1;
     animation-direction: normal;
     animation-fill-mode: forwards;
     animation-play-state: running;
}