Bug 169129 – Can't reliably scroll page whenever mouse cursor inside iframe inside scrollable div with touchpad

• Status: NEW
• Component: Scrolling

[Michael Kuryshev]

Created attachment 303314 [details]
Test case

I can't scroll page (with touchpad, mouse works fine) whenever mouse cursor inside iframe in case when iframe inside scrollable div.

Steps to reproduce:

1. Open test-case.html with Safari browser.
2. Try to scroll page with touchpad while cursor within iframe boundaries.

Actual results:

You can scroll page only up.

Expected results:

Page scrolls up and down.

Safari 10.0.1 (12602.2.14.0.7)
macOS Sierra 10.12.1
Macbook Pro 13"

[Wenson Hsieh]

Your iframe shows "HTTP Error 503. The service is unavailable." for me, but if I replace the src attribute with the URL of a large image, I can reproduce this. I'll take a look -- there might be some place we're not resetting the latching state properly.

[Radar WebKit Bug Importer]

<rdar://problem/30848504>

[Tareq Jarwan]

I have the same issue:

I can't scroll down a page using 2 fingers scroll(with a trackpad, the external mouse works fine) whenever the mouse cursor inside an iframe in the case when iframe inside scrollable div.


Safari 10.0.1 (12602.2.14.0.7)
macOS Sierra 10.12.1
Macbook Pro 13"

[Abdullah Adwan]

(In reply to Wenson Hsieh from comment #1)
> Your iframe shows "HTTP Error 503. The service is unavailable." for me, but
> if I replace the src attribute with the URL of a large image, I can
> reproduce this. I'll take a look -- there might be some place we're not
> resetting the latching state properly.

Hi Wenson, is this being looked at? We still having the same problem in Safari 12.1, macOS Mojave 10.14.4

[Simon Fraser (smfr)]

Please provide a URL we can use to test.

[Abdullah Adwan]

(In reply to Simon Fraser (smfr) from comment #5)
> Please provide a URL we can use to test.

Steps to Reproduce:
Go to: https://readium.firebaseapp.com/?epub=epub_content%2Faccessible_epub_3&
From Settings in left upper hand of the screen select Layout then select Continuous 
Try scrolling down with trackpad 

Thanks

[Abdullah Adwan]

(In reply to Abdullah Adwan from comment #6)
> (In reply to Simon Fraser (smfr) from comment #5)
> > Please provide a URL we can use to test.
> 
> Steps to Reproduce:
> Go to:
> https://readium.firebaseapp.com/?epub=epub_content%2Faccessible_epub_3&
> From Settings in left upper hand of the screen select Layout then select
> Continuous 
> Try scrolling down with trackpad 
> 
> Thanks

Edit: From Settings in right upper hand of the screen

[Simon Fraser (smfr)]

Thanks, I can reproduce the issue there.

[Simon Fraser (smfr)]

The ePub is a series of scrolling="no" iframe inside an overflow:scroll. If the mouse is over an iframe, that traps the scroll. If it's over the overflow (outside the iframe), scrolling works.

[Simon Fraser (smfr)]

EventHandler::platformPrepareForWheelEvents() has some confusing code:

            scrollableContainer = findEnclosingScrollableContainer(wheelEventTarget.get(), wheelEvent.deltaX(), wheelEvent.deltaY());
            if (scrollableContainer && !is<HTMLIFrameElement>(wheelEventTarget))
                scrollableArea = scrollableAreaForContainerNode(*scrollableContainer);
            else {
                scrollableContainer = view->frame().document()->bodyOrFrameset();
                scrollableArea = makeWeakPtr(static_cast<ScrollableArea&>(*view));
...

Here scrollableContainer is the overflow:scroll in the main document. wheelEventTarget is the <iframe> element. So we call into:
                scrollableContainer = view->frame().document()->bodyOrFrameset();
and scrollableContainer ends up as the body(!) of the main page.

I can reproduce this with my application as well. Ping me if you need additional repro cases.

One thing I noticed that might be worth mentioning is that this only happens when the iframe height is smaller than the actual height of the document inside the iframe. In the repro page that Abdullah Adwan provided, all the iframes have a height that is 2px smaller than the actual height of the iframe document because the iframe has a border of size 1px (1px on top and 1px at the bottom, so 2px in total). Scrolling works after removing the border on the iframes. This is consistent with what I observe in my application.