score:3

Accepted answer

Thanks for sharing your component and step to reproduce.

So this seems like a bug, the reason being that the fab displacement is caused by the IonHeader element. But there are some workarounds and an issue for this bug was closed a little while ago with a non-hacky solution. first, you could actually style the fab to be a fixed element

ion-fab {
  position: fixed;
}

Which I don't prefer, and generally is warned against, but in your use case it actually makes sense as your element IS separate from the regular flow of the DOM.

OR you could wrap your content in an IonPage element, which makes a little more sense as it pertains to the framework. It is a little strange because I don't see the IonPage element referenced in the docs like you do the other structure components like IonContent

return (
    <IonPage>
       <IonHeader>
          <IonToolbar>
            ...
          </IonToolbar>
        </IonHeader>
      <IonContent>
        ...
        <IonFab vertical="bottom" horizontal="center" slot="fixed">
          <IonFabButton>
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );

Related Query

More Query from same tag