Ionic 4 - Fixed content work differently on ios / android?

Ionic Framework
1

I want a fixed content that is behind a scroll content. For this goal, the HTML looks like

<ion-content>
  <div slot="fixed" class="header-fixed">
    <h1>This header is fixed</h1>
  </div>
  <div class="content-on-top">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Proin sit amet tristique ex. Aenean bibendum rutrum sollicitudin.
  </div>
</ion-content>

and this is the scss

.header-fixed{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 200px;
  background: red;
  z-index: 9;
}

.content-on-top{
  width: 80vw;
  margin-left:10vw;
  margin-top: 100px;
  background: blue; 
  height: 150vh;
  position: relative;
  z-index: 99;
}

The first image is on android and work very well

27
Capture d’écran 2019-08-05 à 11.04.27.png746×1544 31.8 KB

But on ios, the fixed content is already on top…

IMG_4945
IMG_4945.PNG1125×2436 165 KB

Any advices ?

2

You cannot set z-index for fixed content.

Also, you can create a scrollable area inside fixed content, so you can control z-index of child element: