Как предотвратить игру CSS от игры на сафари? ⇐ CSS

[Anonymous]

Я пытаюсь реализовать простой переход CSS, который внедряет контент в и выходе. Он отлично работает в браузерах на основе хрома, но переход играет нагрузку в более новых версиях сафари. https://drive.google.com/file/d/1ysshpi ... txcrg/view
Код воспроизведения (хотя, вероятно, здесь не произойдет, в стеке переполненной песочницей):


document.querySelector('button').addEventListener('click', () => {
document.querySelector('main').classList.toggle('open')
})< /code>
main {
background: green;
transition: transform 0.5s ease-in-out;
transform: translateX(-100%);
}

main.open {
transform: none;
}< /code>
content
toggle< /code>
< /div>
< /div>
< /p>

Это происходит только в браузере сафари моего коллеги, хотя: < /p>

Sonoma 14,5 (23F79), версия Safari 17.5.111111111111111. Ожидается < /li>
Вентура 13.6.8 (22G820), сафари версия 17.6 (18618.3.11.11.7, 18618) - Переходные сбои < /li>
< /ul>
Как я могу решить эту проблему? Поскольку это происходит только в более новой версии браузера (17.6), возможно, это регрессия браузера?


Подробнее здесь: https://stackoverflow.com/questions/789 ... -in-safari