Problem
iOS 6 creates a new stack context for each child with a position other than static , regardless of whether z-index or not.
Does anyone know if this is the normal expected behavior, or is this a bug in the -webkit-overflow-scrolling path interferes with the stacking order?
Example
See code below or JSFiddle
Both row elements have a relative position, but not a z-index . Both Google Chrome and Safari on my laptop display a blue “submenu” on top of the second row .
When an example is tested on an iOS simulator, a “submenu” is displayed behind the second row . After uninstalling -webkit-overflow-scrolling: touch it displays as I expect.
It seems to me that adding -webkit-overflow-scrolling: touch creates a new stacking context for each child with a different position than static , regardless of whether z-index .
<style> div.content { -webkit-overflow-scrolling: touch; } div.row { width: 100%; position: relative; background: red; margin-bottom: 10px; } div.sub { position: absolute; top: 100%; z-index: 2; background: blue; } </style> <div class="content"> <div class="row"> A <div class="sub"> Sub menu of A<br> Sub menu of A<br> Sub menu of A<br> Sub menu of A<br> </div> </div> <div class="row"> B </div> </div>
`` ``
** Additional note ** I would like to mark this post with '-webkit-overflow-scrolling', but I do not have enough reputation to create a new one.
source share