iOS Safari Z-index not working

Question

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

Answer 1

It was not a Z-index issue. Turns out the parent element of the dropdown was set to overflow: hidden. Setting it to Overflow: visible solved it. Thanks.

Answer 2

In my case, I found the container of the element should be on the top.

I saw this: -webkit-overflow-scrolling: touch;

Then I replace it by -webkit-overflow-scrolling: auto !important;

That solved my bug.

I hope this help you!

Answer 3

-webkit-overflow-scrolling: auto !important;

work for me.