Ionic Framework Version

v9.x (9.0.7)

Current Behavior

core/src/components/fab/fab.scss offsets the horizontal position by the safe area (L28–45):

:host(.fab-horizontal-end) { right: calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px)); }

but pins the vertical one to a constant (L100–102):

:host(.fab-vertical-bottom) { bottom: $fab-content-margin; }   // 10px

With --ion-safe-area-bottom: 34px and --ion-safe-area-right: 20px set on :root, <ion-fab vertical="bottom" horizontal="end"> computes to right: 30px and bottom: 10px. On an iPhone with a home indicator (34 px) or an Android 15 device in edge-to-edge mode (gesture bar ≈ 24–48 px) the button overlaps the system bar, and the lower part of it is not tappable.

Expected Behavior

The fab's bottom edge clears the home indicator / navigation bar, as its left and right edges already clear the side insets.

Steps to Reproduce

1. Set --ion-safe-area-bottom: 34px; --ion-safe-area-right: 20px on :root (or run on a notched device).
2. <ion-content><ion-fab vertical="bottom" horizontal="end"><ion-fab-button>+</ion-fab-button></ion-fab></ion-content>
3. getComputedStyle(fab).bottom → 10px; .right → 30px.

Ionic Info

@ionic/core 9.0.7.