# Top edge fab buttons partially hidden behind ion-header

**URL:** <https://forum.ionicframework.com/t/top-edge-fab-buttons-partially-hidden-behind-ion-header/149957>\
**Category:** Ionic Framework\
**Created:** [December 10, 2018, 9:20pm UTC](https://forum.ionicframework.com/t/top-edge-fab-buttons-partially-hidden-behind-ion-header/149957 "2018-12-10T21:20:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tietochris](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@tietochris](https://forum.ionicframework.com/u/tietochris)\
**Post date:** [December 10, 2018, 9:20pm UTC](https://forum.ionicframework.com/t/top-edge-fab-buttons-partially-hidden-behind-ion-header/149957/1 "2018-12-10T21:20:07Z")

</div>

After an update to Chrome 71, the top edge fab buttons don’t display properly.

This issue is actually visible on the docs page:  
 ![2018-12-10_2227](https://global.discourse-cdn.com/ionicframework/original/3X/4/e/4e12c64b41832324df6a39b2d343f5b31247e4f6.png)

> **[Ionic Framework](https://ionicframework.com/docs/components/#fabs)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

This is also an issue on android phones with running Chrome 71.

Kind regards  
Christoffer

---

<div class="post-metadata">

**Author:** ![neilbo21](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/neilbo21/32/119158_2.png) [@neilbo21](https://forum.ionicframework.com/u/neilbo21)\
**Post date:** [December 13, 2018, 5:37am UTC](https://forum.ionicframework.com/t/top-edge-fab-buttons-partially-hidden-behind-ion-header/149957/2 "2018-12-13T05:37:22Z")

</div>

See my answer here:

> [@Ionic FABs (ion-fab) under header since Chrome 71](https://forum.ionicframework.com/t/ionic-fabs-ion-fab-under-header-since-chrome-71/150188):
>
> So…since Chrome(71+) I suspect Google have replaced certain elements from display:block to [display:contents](https://css-tricks.com/get-ready-for-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…

> <https://github.com/ionic-team/ionic-v3/issues/919>
>
> \*\*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
> \`\`\`

---

<div class="post-metadata">

**Author:** ![HenintsoaAdri](https://avatars.discourse-cdn.com/v4/letter/h/d9b06d/32.png) [@HenintsoaAdri](https://forum.ionicframework.com/u/HenintsoaAdri)\
**Post date:** [December 28, 2018, 9:02pm UTC](https://forum.ionicframework.com/t/top-edge-fab-buttons-partially-hidden-behind-ion-header/149957/3 "2018-12-28T21:02:12Z")

</div>

I resolve it by moving the Fab (ion-fab element) into the ion-header and using bottom edge instead of top edge!

---

<div class="post-metadata">

**Author:** ![neilbo21](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/neilbo21/32/119158_2.png) [@neilbo21](https://forum.ionicframework.com/u/neilbo21)\
**Post date:** [January 25, 2019, 6:19am UTC](https://forum.ionicframework.com/t/top-edge-fab-buttons-partially-hidden-behind-ion-header/149957/4 "2019-01-25T06:19:55Z")

</div>

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

```auto
ion-content {
  contain: size style;
}

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:04pm UTC](https://forum.ionicframework.com/t/top-edge-fab-buttons-partially-hidden-behind-ion-header/149957/5 "2021-07-19T21:04:02Z")

</div>

Closed on July 19, 2021, 9:04pm UTC