Toggle z-index issue / iOS / only on device

Hey guys!

I’m struggling with a strange issue with the toggle-component.
On my pages I’ve got a pink, almost full-page-sized help div, which overlays the page content. The user can close this help div.

This works fine on all pages, except of one where I’m using the toggle component. The toggle button comes to the front on iOS devices (iOS 10.3.3), as you can see in the following picture. It’s not like this all the time, but if you slided to the left or right for example, or move the page just a little bit to the left or right, then it may happen.

Image Toggle issue:

I’m using the ionic2-super-tabs, in case that might be important. And the page where the issue occurs is one of the main tabs.

Everything works fine on ionic serve (iOS and Android) and on android devices.

I tried to use z-index in different ways, but I don’t get it running as expected. Would be gratefull vor any idea where to look at. I’m stuck. Thank you!

Here’s my code. Tried different things (everything with !important as well, as you can see…).

html

<ion-content>

  <div class="helpDiv" *ngIf="showHelp">
    Helptext
  </div> 

  <ion-list no-lines class="profile_list">
    
    <ion-item no-padding>
      <ion-label>Label</ion-label>
      <ion-toggle [(ngModel)]="shopOpenToggle" class="toggle_class"></ion-toggle>
    </ion-item>

  </ion-list>
  
</ion-content>

CSS

    .toggle-icon{
        z-index: 3!important;
        position: relative;
    }

    .toggle-inner{
        z-index: 3!important;
        position: relative;
    }

    .toggle_class{
        z-index: 3!important;
        position: relative;
    }

    .helpDiv{
        position: absolute;
        z-index: 9999!important;
    }

I helped myself by just not showing the toggle if the overlaying help-div is shown. This isn’t a real solution, but it’s good enoug for now…