Fixed Toast element behind address bar on iOS

My toast element doesn’t show up in iOS 16 Safari. It’s because it shows behind the address bar in the bottom. Does anyone know how to fix this? I’m using ionic/vue@7.3.0 with vite and tailwind. I’m triggering the toast via code with toastcontroller. I’m on windows 11 x64 with node v14.18.3.

For mobile, I use the following CSS so the toast doesn’t overlay the bottom tabs. Maybe you could do something similar. Great to see another TailwindCSS user too :smile:

.md .toasts-bottom {
    transform: translateY(-56px) !important;
.ios .toasts-bottom {
    transform: translateY(-50px) !important;

In my main css file, i’ve added

ion-toast {
  width: 100dvw !important;
  height: 100dvh !important;

WARNING: See caniuse dynamic viewport units