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

ionic-v1
1

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:
https://dl.dropboxusercontent.com/u/10543747/slider_issue.mov

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.

2

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

Can you test this on an android device?

3

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

4

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

5

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

6

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

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