This isn’t a question but how I solved a particular scenario for me. It’s very strange how it works but here’s my case (for Ionic 5 but maybe similar when not using Ionic):
Everything is fine, and the ion-fab shows nicely the bottom of the page above the address bar.
But then I try to place that fab button in an an overlay that is either absolute, relative or fixed position. Then it shows below the address bar and for some reason the fixed element thinks the screen is bigger.
In ionic, they have a css class called .ios. It doesn’t work in the component where I have the problem, but in the global.scss file it is available so I did this:
:root{
--ios-vh-bug:0px;
}
.ios {
--ios-vh-bug:-100px;//the vh in 'some' cases will land controls below the address bar. this moves it up.
}
and then in the Component the holds the ion-fab element:
ion-fab{
height: 100vh;
top: var(--ios-vh-bloody-bug);
}
For some reason the -100 does not have an effect on the button when it’s on a normal screen, luckily. It only affects the button when it’s on a non-static parent, luckily, which is of course when the problem happens.
Stated above.
Fixed it.
