Fixed Toast element behind address bar on iOS

Ionic Framework Ionic Vue
1

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.

2

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;
}
2 Likes
3

In my main css file, i’ve added

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

WARNING: See caniuse dynamic viewport units