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

wirhabenzeit · 2025-07-03T21:23:21Z

wirhabenzeit
Jul 3, 2025

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

everettglovier · 2025-07-10T14:46:18Z

everettglovier
Jul 10, 2025

im having the same issue. when I initially add the app to Home Screen, it works. when I close and reopen, it is not working. the app is running in standalone mode but the env(safe-area-inset-bottom) variable is always 0px when computed.

I'm sure this has to do with rendering server side. but, I've tried hacks to only render on client and still cannot get it to work.

0 replies

ikon-dou · 2025-07-14T07:37:42Z

ikon-dou
Jul 14, 2025

I have the same problem.

It only has a height on the first rendering and becomes zero when transitioned by next/link.

0 replies

hlthi · 2025-07-14T09:22:50Z

hlthi
Jul 14, 2025

@wirhabenzeit @everettglovier @ikon-dou

Same problem. I fixed like this. (app router)

First, remove every meta name="viewport" tag from your project (having multiple tags will just conflict). Then, define your viewport settings using Next.js’s built-in API:

// layout.tsx
import type { Viewport } from 'next/app';

// Configure these values as needed
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  viewportFit: 'cover', // very  important you know this 
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

In short
1. Delete all meta name="viewport" tags in your codebase.
2. Export a viewport: Viewport in your layout.tsx (as shown above).
3. Reference the docs for more details: https://nextjs.org/docs/app/api-reference/functions/generate-viewport

Give it a try.

5 replies

Next.js team keeps playing the 'see no evil, hear no evil, know no evil' game.

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

Uh oh!

Summary

Additional information

Example

Replies: 3 comments · 5 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 3 comments 5 replies