next/link break iOS env(safe-area-inset-bottom)?

[wirhabenzeit]

Summary

Hi,

I am developing a Next.JS PWA (those websites which can be added to the iOS home screen). For these kind of Apps there are env variables which can be used to determine how much padding needs to be added eg. to the bottom of the page in order not to interfere with the home screen indicator. E.g. on my phone env(safe-area-inset-bottom) is 34px for PWAs. When I just open the website in Safari the variable is 0px as there still is the URL bar below the content.

Now in my Next.JS app this env variable suddenly turns to 0px as soon as I click on <Link ... > from next/link. For normal <a ...> links for in-app navigation the env-variable stays at 34px. But I would prefer using <Link ...> for responsive client side rendering preserving the app state.

Here some screenshots illustrating the issue. The red bottom bar has a height of env(safe-area-inset-bottom). The first screenshot is at initial page load, the second one after using to navigate to page2, the third one after using to navigate there.

Any idea how to keep the env(safe-area-inset-bottom) variable throughout in-app navigation?

Thanks

Additional information

No response

Example

https://codesandbox.io/p/devbox/affectionate-architecture-7ptjcw?workspaceId=ws_2ytHNaqFNLW5acVbmANCog