Menu
On iOS the z-index of a scrollable area is ignored when using -webkit-overflow-scrolling. If two objects with -webkit-overflow-scrolling overlap the lower one is scrolled instead of the one being displayed above.
Create two elements overlaying each other (with position: absolute for example), one of them having a higher z-index and add
.selector { overflow-y: auto; -webkit-overflow-scrolling: touch; } to both of them. Both elements should have enough content to be scrollable.
Additionally add
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> to your <head>. Then add the page to your home screen and launch it from there.
If you then try to scroll the upper element the element beneath is scrolled instead.
Alternatively just check out this pen. Launch the full version from your iOS device, add it to your home screen and launch from there.
Tested on iPhone 5 and iPhone 6 with iOS 9.1 and iOS 9.3.2
overflow-y to hidden via JS does fix the problem, however toggling overflow causes a repaint causing performance issuesheight: 100%; width: 100% from html, body fixes the problem as well, however those have to be set for percentage values to work properlyNeeded is a proper solution / workaround to fix this issue without causing any troublesome side-effects. Also explanation of why this happens would be appreciated.
840
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.
Bookmark this question. Show activity on this post. The Z-index isn't rendering properly on Safari - but it is working fine on Chrome and Firefox.
Solution: Move the modal outside of the content parent, and into the main stacking context of the page. Now, the modal element is a sibling element to the two others. This puts all three elements in the same stacking context as them, so each of their z-index levels will now affect one another.
Essentially, what you're experiencing is an iOS bug with -webkit-overflow-scrolling: touch;. In order to solve this bug, as per this answer, just add the following CSS styles to the scrollable div:
-webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); -webkit-perspective: 1000; So all in all, if you add the above styles to the styles for the scrollable class in your CSS, it should work. Tested on an iPhone 5s running iOS 9. Note that if you scroll down to the bottom or top of the scrollable section that is above everything else, it will start to scroll the body.
I believe that what those extra styles do is trick the iPhone into using the GPU, but remember that they're only necessary due to a bug with Safari - it's not your fault and these extra styles shouldn't really need to be included. But pop them into your CSS and it should work like a dream!
86
Assuming you face the problem like them. Please, take a look at these post:
https://stackoverflow.com/a/20898012/4168867
[Solved] Safari for iOS: z-index order bug scrolling a page with a fixed element
https://stackoverflow.com/a/9227478/4168867
Hope this help!
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
