Closed
Description
Thx for making this, i noticed the following issue. The pb-safe is not applied when nextjs 15 pwa is used on iOS.
page.tsx:
export default function Search() {
return (
<div className="pb-safe bg-red-200">
<div className="bg-green-100 h-96">tset</div>
<div className="bg-green-100 h-96">tset</div>
<div className="bg-green-100 h-96 pb-safe">tset</div>
{/* <BottomNavbar /> */}
</div>
);
}
layout.tsx:
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Head from "next/head";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
applicationName: "test",
title: "test",
description: "test",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<Head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=0, viewport-fit=cover"
/>
<link rel="apple-touch-icon" href="/images/icon-192.png" />
<link href="/images/icon-192.png" rel="icon" sizes="192x192" />
<link href="/images/icon-512.png" rel="icon" sizes="512x512" />
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
</Head>
<body>{children}</body>
</html>
);
}
tailwind.config.ts:
...snip...
},
},
},
plugins: [
require("@tailwindcss/forms"),
heroui(),
require("tailwindcss-safe-area"),
],
};
export default config;
globals.css:
...snip...
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html,
body,
#root {
height: -webkit-fill-available;
}
}
demo:
signal-2025-05-01-000811.mp4
Metadata
Metadata
Assignees
Labels
No labels