Top edge fab buttons partially hidden behind ion-header

[neilbo21]

See my answer here:

Ionic FABs (ion-fab) under header since Chrome 71

So…since Chrome(71+) I suspect Google have replaced certain elements from display:block to display:contents , which Ionic (3) Framework relies on for fabs (other elements). So the technical “correct” fix is . ion-content { display: contents; } …but this breaks other elements such as Modals etc. You may be better off Moving the FAB (ion-fab element) into the ion-header Wrapping the fab button in a div and adding position relative to that div This accounts for devices with notches as wel…

I’ve also submitted an Issue to the Github repo…

FABs (ion-fab) with attributes top edge appear under ion-header with devices using Chrome version 71