У меня есть страница, которую я перехожу на экран и выключаю, вот так
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
transition: transform 500ms ease;
transform: translateY(${isOpen ? "0vh" : "100vh"});
z-index: 200;
Однако в мобильном сафари содержимое не отображается до завершения перехода. Эта проблема не возникает в мобильном браузере Chrome или Desktop Safari
![enter image description here](https://i.stack.imgur.com/l7nWj.gif)
Что приводит к тому, что содержимое не отображается до завершения перехода? Какие шаги я могу предпринять, чтобы обеспечить их рендеринг до начала перехода?
EDIT:
Если я изменю дочерний контейнер на position: fixed
, проблема рендеринга решится, но я больше не смогу прокручивать