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

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 https://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 '18 at 19:32
Try narrowing it down then. I doubt this is a *z-index* problem. What about the desktop version of Safari? — leonheess, Jun 24 '18 at 19:47
The desktop version also doesn't work. I tried removing `overflow-y` altogether but still no luck. — grape657, Jun 24 '18 at 19:57

score 16 · Answer 1 · answered Jun 24 '18 at 20:08

16

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.

answered Jun 24 '18 at 20:08

grape657

241
1
2
6

score 11 · Answer 2 · answered Apr 05 '19 at 05:03

11

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!

answered Apr 05 '19 at 05:03

Duc Chi

391
4
8

score 8 · Answer 3 · edited Mar 04 '20 at 03:23

8

-webkit-overflow-scrolling: auto !important;

work for me.

edited Mar 04 '20 at 03:23

U13-Forward

69,221
14
89
114

answered Mar 04 '20 at 03:22

user2943576

89
1
1

score 2 · Answer 4 · answered Jun 24 '18 at 19:47

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

answered Jun 24 '18 at 19:47

Orkhan Jafarov

215
2
7

I've tried Relative, Fixed and Absolute positioning but still doesn't work. – grape657 Jun 24 '18 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 – Orkhan Jafarov Jun 24 '18 at 20:03

iOS Safari Z-index not working

4 Answers4

Linked