iOS not respecting z-index with -webkit-overflow-scrolling

Question

Problem:

On iOS the z-index of a scrollable area is ignored when using -webkit-overflow-scrolling. If two objects with -webkit-over

Answer 1

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!