Top edge fab buttons partially hidden behind ion-header

neilbo21 · December 13, 2018, 5:37am

See my answer here:

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

github.com/ionic-team/ionic-v3

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

opened 02:14AM - 13 Dec 18 UTC

closed 03:38PM - 29 Jan 19 UTC

neilbo

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> ```  **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 ```

Topic		Replies	Views
Ionic FABs (ion-fab) under header since Chrome 71 ionic-v3	6	3111	July 19, 2021
Ion-header partially visible on Android ionic-v3	12	4915	January 27, 2025
FAB z-index Not Working ionic-v3	3	1102	July 19, 2021
[beta 11] Fab button and header shadow ionic-v3	6	1839	September 25, 2018
Fab button behind toolbar Ionic Angular	2	802	November 3, 2021

Top edge fab buttons partially hidden behind ion-header

Related topics