After an update to Chrome 71, the top edge fab buttons don’t display properly.
This issue is actually visible on the docs page:
This is also an issue on android phones with running Chrome 71.
Kind regards
See my answer here:
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…
opened 02:14AM - 13 Dec 18 UTC
closed 03:38PM - 29 Jan 19 UTC
triage
**I'm submitting a ...**
[x] bug report
**Current behavior:**
Go to h… ttps://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>
```
<!-- If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:
A sample application via GitHub
StackBlitz (https://stackblitz.com)
Plunker (http://plnkr.co/edit/cpeRJs?p=preview)
-->
**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
```
I resolve it by moving the Fab (ion-fab element) into the ion-header and using bottom edge instead of top edge!
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;
}
