-webkit-overflow-scrolling: touch does not "obey" z-index

[bridgestew]

Summary:

-webkit-overflow-scrolling: touch does not "obey" z-index.

Platforms:

iOS5, not sure about other platforms

How to reproduce:

1. Build a content area and a modal overlay above it using HTML/CSS
2. View on iPad for the example below. When you attempt to scroll the page, the content behind the modal scrolls. I wouldn't expect this, since attempting to click a link behind a z-index div doesn't work...

Reduced Example:

(Hastily thrown together example. No Media queries applied, so ignore the ugly -- just check out the bug.)
http://jsfiddle.net/cPHMN/48/embedded/result/

Bug Tracker ticket(s):

Workarounds:

[scottjehl]

Interesting. This sounds and looks similar to how touch devices vary in their bubbling of scroll events on elements in the page.

Is your scroll region short enough to trigger a scroll? I wonder how it'll behave if it is...

On Mar 27, 2012, at 9:19 PM, bridgestew wrote:

Summary:

-webkit-overflow-scrolling: touch does not "obey" z-index.

Platforms:

iOS5, not sure about other platforms

How to reproduce:

1. Build a content area and a modal overlay above it using HTML/CSS
2. View on iPad for the example below. When you attempt to scroll the page, the content behind the modal scrolls. I wouldn't expect this, since attempting to click a link behind a z-index div doesn't work...

Reduced Example:

(Hastily thrown together example. No Media queries applied, so ignore the ugly -- just check out the bug.)
http://jsfiddle.net/cPHMN/48/embedded/result/

Bug Tracker ticket(s):

Workarounds:

---

Reply to this email directly or view it on GitHub:
#14

[bridgestew]

I don't understand your question about the scroll region being short enough. :)

[moll]

One workaround is to apply the same overflow: scroll and -webkit-overflow-scrolling: touch on the layer above it to stop the lower one from getting the events.

[kpuputti]

I think I ran into the same issue with my custom map component.

I have a large pannable image (with -webkit-overflow-scrolling: touch) and absolutely positioned marker images on top. Sometimes I get one marker to show up, but usually they are hidden no matter what the z-index is.

Any solutions yet for this?

[moll]

@kpuputti This bug's problem with z-index is only functional — visually the items are correct. You sure the map you've got has a lower z-index than all the markers?

[kpuputti]

@moll Yes, the z-index on the map is lower than on the markers.

I'm using Overthrow ( http://filamentgroup.github.com/Overthrow/ ) and the map works fine on Android 2.3 & 4.0, WP7, iOS 4.2. Of these platforms, at least Android 4.0 supports the native touch scrolling.

This comment is the only info I've found:
http://mobile.tutsplus.com/tutorials/mobile-web-apps/ios-5-fixed-positioning-and-content-scrolling/comment-page-1/#comment-17477

[kpuputti]

Oh, I found the solution. My problem seemed to be the same as in this issue:

#8

and the proposed workaround fixed the problem.

[hober]

This is not a bug; -webkit-overflow-scrolling: touch induces a stacking context. Just like if you put opacity: 0.9 or a 3d transform on the element.

[toddparker]

Thanks for chiming in with this info @hober.

[cstewartgannett]

@hober How is this not a bug? I have my context layered properly and -webkit-overflow-scrolling: touch on the top most layer. Functionally everything works properly, except that the background scrolls instead of my modal, unless I use the scrollbar to scroll the div (which contains an unavoidable iFrame). Has anyone else found a workaround for this?

[noordawod]

Hello all,

I am in the same boat here, unfortunately. But I did find a solution to this. Actually only one, for now.

The solution that I've found is to turn off overflow for the DIV underneath (having lesser z-index) using "overflow:hidden". This seems to trick iOS into capturing the touch events on the top-most DIV (having a higher z-index).

The only downside to this trick, however, is once the DIV having the higher z-index is dismissed (using animation or not), and "overflow:auto" or "overflow:scroll" is reapplied to the DIV underneath, a short "flick" is noticed as if the iOS is redrawing that DIV.

If any of you guys or gals found a better solution, it'd be nice to share.

/Noor

[moll]

@noordawod:

If any of you guys or gals found a better solution, it'd be nice to share.

Well, I consider the workaround I posted a year ago to be a better solution as it doesn't require JavaScript nor changes other elements' styles.

[noordawod]

@moll

I've seen and checked your proposed solution before. Surely, I had these CSS rules in place since I wanted the top DIV to have a scrollbar, even before I saw your post (it only made sense to me.)

Now, the interesting thing is that although this works when the DIV is displayed without any animation, the solution doesn't work when animating the DIV (for example, making it appear by sliding it from the bottom of the screen to the top, like Safari's Bookmarks panel on the iPhone.)

This must be a bug in iOS's transformations, I am guessing. Not opacity, as @hober suggested, since when I show the DIV instantly without an animation, and set its opacity to 0.9, scrolling still works.

So we're back to the first post by @bridgestew since it doesn't work when the DIV is animated, sadly.

/Noor

[noordawod]

And like I mentioned before, only setting overflow to hidden on the lower DIV makes the top DIV respond to touch scrolling (when the top DIV has been animated to its position.)

[noordawod]

Here's more information about a stacking context, introduced by @hober :
http://daneden.me/2012/04/css-transforms-and-z-index/