I have a dropdown menu in HTML but it's hidden by some other page content on iOS. The dropdown appears perfectly on Android and PC but refuses to appear on iOS Safari browser (Tested on iOS 9 and 10).
I have specified a higher z-index for the dropdown and a lower one for the page content. I have also tried:
-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);
with no luck.
Here is my CSS:
Dropdown
.dropdown-content2 {
display: none;
position: fixed;
left: 10%;
background-color: #EFEFEF;
padding: 20px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
font-size: 13px;
width: 50%;
height: 300px;
overflow-y: auto;
-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);
}
Page Content
.newmain{
margin-left:0px;
margin-top: 130px;
padding: 20px;
z-index: 90;
}
overflow-y
altogether but still no luck.