I am seeing that when I use the following structure in a template:
<ion-header></ion-header>
<ion-content></ion-content>
<ion-footer>
<ion-toolbar>
</ion-toolbar>
</ion-footer>
That I am seeing a weird layout bug in iOS, where it adds an unwanted padding to the bottom of the <ion-footer>. Upon inspection to the CSS through Safari and the emulator, this is what I am seeing:
ion-footer ion-toolbar:last-of-type {
padding-bottom: var(--ion-safe-area-bottom, 0);
}
Which creates this outcome:
The footer is the section with the Single Restriction and Multiple Restrictions icons that has the extra padding at the bottom of it.