UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Steps to reproduce the problem:
I created a reduced Codepen example here: https://codepen.io/brandyscarney/pen/bOgmvW?editors=1100

1. Open the Codepen above
2. See that the circular button on the right is behind the header
3. Comment out / remove one of the following lines in the CSS section:

```
/* commenting the below line resolves the problem */
z-index: 10;
```

or

```
/* commenting the below line resolves the problem */
contain: layout;
```

4. See the button appear on top of the header.

This issue did not exist prior to Chrome 71, and it is working without commenting anything out in Firefox and Safari (both tested on a Mac).

This is also visible in our demo on our documentation site here: https://ionicframework.com/docs/components/#fabs

What is the expected behavior?
The button (z-index: 999) should appear on top of the header (z-index: 10) when the contain property set.

What went wrong?
With the update to Chrome 71, the button is now displaying behind the header.

Did this work before? Yes 70

Does this work in other browsers? Yes

Chrome version: 71.0.3578.98  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

I am not sure if this is a bug or if it is a code issue that will eventually break in all browsers, so my apologies if it is on us.