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 well

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

page html

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

further reading:

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.

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.

Thanks for pointing this out!

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

  <ion-fab bottom right edge >

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

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.

ion-content {
  contain: size style;