iOS custom classes like env(safe-area-inset-bottom) only applied on first load/404 page #1695
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
custom padding/height for IOS based on env(), for example: env(safe-area-inset-bottom), only applies on first load in Nextjs 15 with TailwindUI.
Tailwind.config.ts:
...snip... extend: { padding: { safe: "env(safe-area-inset-bottom)", "safe-body": "calc(4rem + env(safe-area-inset-bottom))", }, height: { "nav-safe": "calc(4rem + env(safe-area-inset-bottom))", }, ...snip...BottomNavbar.tsx:
NAV OBJECTS ...snip... ``
...snip...
layout.tsx:
...snip... <body className="bg-gray-100 flex flex-col min-h-screen"> {children} <BottomNavbar /> </body> ...snip...Describe the bug
The added custom padding in Tailwind.config.ts for iOS is only applied when the app first loads, and on the default 404 page. when navigating to another page using the nav, the padding dissapreas and only reapperas if the app is reloaded. an exclusion is the standard 404 page, that always shows the padding to be correct.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The padding to be applied not only on page load/404 page, but also after navigating to other pages
Screenshots
If applicable, add screenshots to help explain your problem.
Opening the pwa on iOS (padding applied):
opening a 404 page (padding applied):
Navigating back to the existing start page (padding no longer applied):
Browser/Device (if applicable)
The text was updated successfully, but these errors were encountered: