15
Views
5
Comments
Fixed position z-index flickering in IOS devices
Question

Fixed position z-index flickering in IOS devices

I have a bottom fixed position div and setted z-index to it. while scrolling up and down the page in IOS device, the bottom fixed div disappears and shows. This issue only reproduce in iphone, ipad actual devices.

mvp_badge
MVP
Rank: #18

Hi Yasar,

Can you share the CSS that you used.

Regards,

Daniel

Rank: #56867

Thanks for your response Daniel. I used the below css.

.singleNextDepositMainCntr {
    position: fixed;
    bottom: 0px;
    height: 32vh;
    width: 100% !important;
    z-index: 98;
    padding-top: 5vh;
}
mvp_badge
MVP
Rank: #18

Hi,

Maybe you should read https://www.thetopsites.net/article/52730468.shtml for some possible CSS fixes you can try to apply.

Regards,

Daniel

Rank: #56867

But Daniel I tried with the below css along with fixed position. It's work for iPad but in iPhone the fixed position div is totally hiding.

transform: translateZ(0);
-webkit-transform: translateZ(0);
Rank: #56867
/*Main parent div*/
.ios .main-content {
    height: 100% !important;
}
/*Child div(scrollable div)*/
.DashBoard {
    background-color: #fff;
    height: 57vh;
    overflow: auto; 
}
/*Bottom div*/
.singleNextDepositMainCntr {
    position: fixed;
    bottom: 0px;
    height: 32vh;
    width: 100% !important;
    z-index: 98;
    padding-top: 5vh;
}
/*Footer div(its below the singleNextDepositMAincntr)*/
.bottom {
    z-index: 14
}

This is the overall css which i used in my page.