Bug 103598 – Only create stacking context for -webkit-overflow-scrolling:touch elements when element allows scrolling

• Component: New Bugs
• Status: NEW

[Tien-Ren Chen]

Only create stacking context for -webkit-overflow-scrolling:touch elements when element allows scrolling

[Tien-Ren Chen]

Created attachment 176641 [details]
Patch

[Alexandre Elias]

In the original bug https://bugs.webkit.org/show_bug.cgi?id=78664 jamesr mentioned that "It also looks like the logic this patch added to CSSStyleSelector.cpp doesn't quite match the iOS5 code drop :(".  Could we double-check this at the same time?  The latest code drop is at http://www.opensource.apple.com/release/ios-601/

[Tien-Ren Chen]

(In reply to comment #2)
> In the original bug https://bugs.webkit.org/show_bug.cgi?id=78664 jamesr mentioned that "It also looks like the logic this patch added to CSSStyleSelector.cpp doesn't quite match the iOS5 code drop :(".  Could we double-check this at the same time?  The latest code drop is at http://www.opensource.apple.com/release/ios-601/

This is what I see in StyleResolver.cpp, WebCore-1640.1:
#if ENABLE(OVERFLOW_SCROLLING)
        // Touch overflow scrolling creates a stacking context.
        || style->useTouchOverflowScrolling()
#endif
        // Touch overflow scrolling creates stacking context.
        || ((style->overflowX() != OHIDDEN || style->overflowY() != OHIDDEN) && style->useTouchOverflowScrolling())

So iOS6 is creating stacking context everywhere -webkit-overflow-scrolling:touch is used. I will verify that on my phone later.

[Simon Fraser (smfr)]

(In reply to comment #3)
> So iOS6 is creating stacking context everywhere -webkit-overflow-scrolling:touch is used. I will verify that on my phone later.

Yes it is.

[Alexandre Elias]

Comment on attachment 176641 [details]
Patch

Clearing r? flag.  Let's leave this as is since iOS Safari has this behavior.

[Nicolas BADIA]

I was going to open a new issue but I guess that fixing this one will fix mine too.

Here is a jsFiddle to show the issue: http://jsfiddle.net/nicolasbadia/yaVBW/

On mobile, when overflow-scrolling is set to touch, the green div is over the red one, otherwise the red one is over the green one (which is always the case on desktop and also the right behaviour).