translateY(calc(env(safe-area-inset-top) + 12px)) scale(0.954023); in rootId it does not work correctly about react-modal-sheet

[Temzasse]

Thanks for reporting this! 🙏

The problem here is that the iOS effect currently assumes that the root element height is 100% of the viewport height but this might not be true in certain cases like your Nextjs example. If the root element is much higher the scale calculation will produce incorrect looking result.

One way to fix this issue is to make sure the root element height is 100% the viewport height by applying these styles to the root:

height: 100vh;
overflow: auto;

I will investigate if I could make the scale calculations for the iOS effect more robust somehow 🤔 🕵️

[Temzasse]

The way a webpage works by default is that the whole body of the page is scrollable which is not compatible with the iOS effect since there is no way to do the effect if you have scrolled down from the top of the page because the effect relies on transforming the root element. So in order to make the effect work properly you have to set the root element height to be exactly the same as the viewport height.

[rivaslive]

excellent, set my container height as you said and it works as desired