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

[neilbo]

I'm submitting a ...
[x] bug report

Current behavior:

Go to https://ionicframework.com/docs/components/#fabs using Chrome version 71+,
The FABs that have attributes "top edge" are under the header in devices that use Chrome version 71+
Expected behavior:

The FABs should appear above the header
Steps to reproduce:

The quickest way to see this is to:
Go to Ionic docs for FAB https://ionicframework.com/docs/components/#fabs
Related code:

<ion-content>
<ion-fab top right edge>
  <button ion-fab color="primary">
    <ion-icon name="add"></ion-icon>
  </button>
</ion-fab>
<ion-content>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
https://forum.ionicframework.com/t/ionic-fabs-ion-fab-under-header-since-chrome-71/150188

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.2.0
    Cordova Platforms  : android 6.4.0 browser 5.0.4 ios 4.5.5
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2
    Node              : v8.11.1
    npm               : 6.1.0
    OS                : macOS High Sierra
    Xcode             : Xcode 10.1 Build version 10B61

Environment Variables:

    ANDROID_HOME : /Users/neil/Library/Android/sdk

Misc:

    backend : pro

[HenintsoaAdri]

Move ion-fab into ion-header and use bottom edge

[brassier]

While the suggestion by @HenintsoaAdri will work around the problem, I don't think that's the real solution here. The Ionic docs note putting the FABs in the content, and their docs also show this issue.

Here's a link to a similar issue on the Ionic 4 project. That link has some more info about the cause of this behind the scenes.

[gscardovelli]

Move ion-fab into ion-header and use bottom edge

This worked for me

[neilbo]

If you use a segment component the suggestion by @HenintsoaAdri will not work. See forum link
https://forum.ionicframework.com/t/ionic-fabs-ion-fab-under-header-since-chrome-71/150188

[brassier]

The suggested fix in the other Ionic 4 issue I linked to above is to add this to the app.scss:

ion-content {
  contain: size style;
}

It sounds like this will be the fix they eventually try to put back into Ionic 3 too. It requires a bit of regression testing, but that seemed to work for me.

[neilbo]

The suggested fix in the other Ionic 4 issue I linked to above is to add this to the app.scss:

ion-content {
  contain: size style;
}

It sounds like this will be the fix they eventually try to put back into Ionic 3 too. It requires a bit of regression testing, but that seemed to work for me.

Can confirm this works on my ionic 3 project. Thanks @brassier @brandyscarney

[brandyscarney]

We're working to get the testing and release scripts back up and running on this repository but once we do we'll get this PR in: #942

And release a new Ionic 3. 🙂 In the meantime please use that workaround, thank you!!