页面过渡将不会加载子级，直到完成

Question

我有一个要在屏幕上和屏幕上切换的页面，

position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
transition: transform 500ms ease;
transform: translateY(${isOpen ? "0vh" : "100vh"});
z-index: 200;

但是，在移动浏览器中，直到转换完成后才呈现内容。 在移动Chrome或台式机Safari中不会发生此问题

是什么导致内容在转换完成后才能呈现？我可以采取什么步骤来确保在过渡开始之前将其渲染？

编辑：

如果我将子容器更改为position: fixed，则渲染问题得以解决，但我不再能够滚动