Fixed position z-index flickering in IOS devices

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.

Hi Yasar,

Can you share the CSS that you used.

Regards,

Daniel

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;
}

Hi,

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

Regards,

Daniel

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);
/*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.