Slidebox: pager dissapears on iOS device if it is displayed over a background


I’m using a slidebox where the ion-slides have a background.

When I try to run this in the iOS simulator or on iOS device (haven’t checked Android yet), the pager disappears and reappears when scrolling ion-content up and down.

Please see this video for an illustration of what is happening:

Basically once a div that goes underneath the pager, that div clips over the pager once you scroll past a certain point. I have no idea why this is happening. Z-index on the pager seems to be ignored.

It could have something to do with the fact that when you scroll the pager under the status bar, it dims a little bit. However, I can’t pinpoint if this dimming effect is something in the CSS, since the DOM doesn’t seem to change when inspecting. Any ideas? It looks really buggy right now.


Hmm, really odd…ios has some odd z-index quirks about it.

Can you test this on an android device?


@mharrington Have just tested this on Android 4.4, happens there too :frowning:


I have hit the same issue too on iOS b14, does anyone have any idea what might be causing it and any workarounds?


Any news on this? I have the same problem on iOS using ionic rc.4


I have just found the following solution that worked for me as well…

.slider-pager {
-webkit-transform: translateZ(0);
transform: translateZ(0);