admin管理员组文章数量:1356588
I've been trying to solve this iPhone issue with the bottom navigation bar and the top safe area being transparent with no luck:
What I have tried:
- Using the
env(safe-area-x)on tailwindcss side:
@layer utilities {
.pb-safe {
padding-bottom: env(safe-area-inset-bottom);
}
.pt-safe {
padding-top: env(safe-area-inset-top);
}
}
- view-port:
<meta
name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
- I tried to reach out to the Swift code, but there's only one launch screen interface builder.
The mobile navigation component:
return (
<>
<div className="fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600">
<div className="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">
<button
type="button"
className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group"
>
<svg
className="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
aria-hidden="true"
xmlns=";
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
</svg>
<span className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500">
Home
</span>
</button>
<button
type="button"
className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group"
>
<svg
className="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
aria-hidden="true"
xmlns=";
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M11.074 4 8.442.408A.95.95 0 0 0 7.014.254L2.926 4h8.148ZM9 13v-1a4 4 0 0 1 4-4h6V6a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h17a1 1 0 0 0 1-1v-2h-6a4 4 0 0 1-4-4Z" />
<path d="M19 10h-6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Zm-4.5 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM12.62 4h2.78L12.539.41a1.086 1.086 0 1 0-1.7 1.352L12.62 4Z" />
</svg>
<span className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500">
Wallet
</span>
</button>
<button
type="button"
className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group"
>
<svg
className="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
aria-hidden="true"
xmlns=";
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"
/>
</svg>
<span className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500">
Settings
</span>
</button>
<button
type="button"
className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group"
>
<svg
className="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
aria-hidden="true"
xmlns=";
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
</svg>
<span className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500">
Profile
</span>
</button>
</div>
</div>
</>
);
The main layout.tsx:
return (
<html lang="en" className="[color-scheme:dark]">
<meta
name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<body className="bg-gray-1100 overflow-none bg-[url('/grid.svg')] pb-safe">
<Theme appearance="dark" hasBackground={false}>
<UserContext.Provider value={{ user, updateUser }}>
<GlobalNav />
<div className="mb-16 lg:pl-72 pb-safe">
<Toaster
position="top-right"
reverseOrder={false}
toastOptions={{
className: "",
style: {
borderRadius: "10px",
background: "#333",
color: "#fff",
},
}}
/>
<div className="fixed top-0 w-full bg-vc-border-gradient rounded-lg p-px shadow-lg shadow-black/20">
<div className="rounded-lg bg-black">
<AddressBar />
</div>
</div>
<div className="mx-auto max-w-7xl space-y-8 px-2 mt-14 lg:px-8 lg:py-8">
<div className="bg-vc-border-gradient rounded-lg p-px shadow-lg shadow-black/20">
<div className="rounded-lg bg-black p-3.5 lg:p-6">
{state === State.LOADING && (
<IconSpinner className="w-10 h-10 animate-spin" />
)}
{state === State.LOADED && children}
</div>
</div>
</div>
</div>
<MobileNav />
</UserContext.Provider>
</Theme>
</body>
</html>
);
Any pointers?
版权声明：本文标题：ios - Tauri with TailwindCSS `env(safe-area-inset-bottom)` doesn't work on bottom navigation bar - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743991342a2572195.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论