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

Ionic Framework ionic-v3
1

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 well
app.scss

ion-header div.fab--container {
    position: relative;
}

page html

<ion-header>
    <ion-navbar color="primary">
      <ion-title>{{ title }}</ion-title>
    </ion-navbar>
    <div class="fab--container">
        <ion-fab
        top
        right
        edge
      >
        <button ion-fab mini color="primary" (tap)="addSomething()">
          <ion-icon name="add"></ion-icon>
        </button>
      </ion-fab>
    </div>
  </ion-header>

24%20am
Screen Shot 2018-12-13 at 9.26.24 am.png1668×867 133 KB
16%20am
Screen Shot 2018-12-13 at 9.26.16 am.png1666×868 203 KB
05%20am
Screen Shot 2018-12-13 at 9.26.05 am.png1669×862 154 KB

further reading:

2

What we actually ended up with, was to move the ion-fab element between the ion-header and the ion-content, and changed the positioning from top: -28px, to top: 28px. Tested and it works with both Chrome 70 and 71.

Bummer that we are this vulnerable to changes in Chrome. But great that you posted an issue on GitHub.

Thanks for letting me know.

3

Glad to hear you got a fix.
I’m curious did you test this solution with phones with notches (iPhone X)?

It didn’t seem to work for me.

4

Thanks for pointing this out!

Moving fabs to header and setting “bottom edge” worked for me:

<ion-header>
  ...
  <ion-fab bottom right edge >
   ...
  </ion-fab>
</ion-header>
5

Nice. I think I like this solution. Even less code…

But this doesn’t work though if you have a tool bar (that houses ion-segments) in your ion-header

6

The better solution more recently is to override ion-content attribute contain as below until the fix is merged in. No need to move ion-fab around.
app.scss

ion-content {
  contain: size style;
}