7

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;
}
4
  • You should include the version of the browser with questions like this. It could be that one of the other used css-properties isn't supported. On caniuse.com you can check which features are supported by which browser. Try narrowing it down by removing some css temporarily until you are sure that the problem is indeed z-index.
    – leonheess
    Jun 24, 2018 at 19:32
  • Sorry, its iOS 9 and 10
    – grape657
    Jun 24, 2018 at 19:44
  • Try narrowing it down then. I doubt this is a z-index problem. What about the desktop version of Safari?
    – leonheess
    Jun 24, 2018 at 19:47
  • The desktop version also doesn't work. I tried removing overflow-y altogether but still no luck.
    – grape657
    Jun 24, 2018 at 19:57

4 Answers 4

15

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.

0
10

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!

7
-webkit-overflow-scrolling: auto !important;

work for me.

2

that's weird, safari is okay with z-index.

You're not using position: relative or whatever position in .newmain, z-index is not gonna work without position.

Try to add position into .newmain

2
  • I've tried Relative, Fixed and Absolute positioning but still doesn't work.
    – grape657
    Jun 24, 2018 at 19:56
  • try to add top: {any}px into your .dropdown-content2, maybe it's appearing somewhere above, cause fixed position is weird and not relate with parent elements' position Jun 24, 2018 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.