Android Native browser doesn't respect z-index for scrolling

Question

I have setup a fiddle to reproduce this issue. Only in android native browser, the scroll is working for the element beneath absolute positioned element. It doesn't seem to respect the z-index for scrolling.

html, body {
    height: 100%;
    overflow: hidden;
}
#scroll {
    height: 100%;
    overflow: scroll;
}
.overlay {
   height: 100%;
   width: 100%;
   background-color: #333;
   opacity: .4;
   position: absolute;
   z-index: 4;
   left: 0;
   top: 0;    
 }

Code: http://jsfiddle.net/s4vPV/5/

Result: http://fiddle.jshell.net/s4vPV/5/show/

@mcmac Nope. Expected o/p is Scroll should not happen. Only in android native browser (not chrome) scroll is happening for the div "#scroll". — sathis, Dec 23 '13 at 13:43

score 2 · Answer 1 · answered Dec 23 '13 at 13:55

2

Give your #scroll div a position:relative, and set the z-index:3 or something less, so that the browser respects what is on top of what.

answered Dec 23 '13 at 13:55

Nick Salloum

2,158
12
13

score 2 · Answer 2 · edited Apr 25 '14 at 16:07

I made some minor changes to your CSS, which solved the issue you are running into:

On your #scroll element, you are not defining the positioning, but you are defining the position on your .overlay element with absolute. This, plus apply the z-index property with a value of 4 to the .overlay element causes the overlay to stack on top of the #scroll element. Since the overlay has a height and width of 100%, you are causing the #scroll element to become inaccessible, due to the .overlay element covering it entirely.

#scroll {
   height: 100%;
   overflow: scroll;
}

.overlay {
   height: 100%;
   width: 100%;
   background-color: #333;
   opacity: .4;
   position: absolute;
   z-index: 4;
   left: 0;
   top: 0;
}

Basically, if the browser were sheets of paper that were perfectly stacked upon one another, you wouldn't be able to read "access" at the bottom of the stack.

If you are trying to style your scroll bars, I would recommend looking into styling them directly. If not, all you have to do is place a position: relative on the #scroll and a z-index: 5; which will solve this issue.

Here is a jsfiddle with the solution: http://jsfiddle.net/dmidify/s4vPV/10/

Android Native browser doesn't respect z-index for scrolling

2 Answers2