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

[rivaslive]

THANK'S!

first of all, give thanks for the great work

PROBLEM:

when I select rootId to do the iOS effect, the div generates excessive top margin, and it doesn't do the effect like this in the demo , I would like to know what I am doing wrong ?, embed my Tag <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover"/>,
I am using Nextjs, and I try to use env () in the official site of next and it seems to have a similar behavior, maybe something specific to the DOMVirtual, maybe they should look for an alternative to that effect ...

env() CSS in Nextjs Page:

[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