WebView within TabbedPage on Android has weird scrolling interactions

[SteveSandersonMS]

Description

If you put a WebView (for example BlazorWebView, but it doesn't have to be Blazor) inside a TabbedPage, and the content within the webview has horizontal scrolling, then trying to scroll the web content horizontally will cause the enclosing TabbedPage to scroll and switch to the previous/next tab.

This basically means you can't have this combination of controls as the UX is broken. On other platforms this problem doesn't occur because other platforms don't use swipe left/right to switch tabs.

Expected behavior: If the touch interaction starts within the webview, it should not scroll the enclosing TabbedPage.

Steps to Reproduce

Create MAUI app. Add TabbedPage with multiple tabs. Add WebView inside one of the tabs. Get the webview to show some web content like:

<div style="overflow-x: scroll">
    <div style="width: 3000px">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>
</div>

... then run the app on Android and try to scroll that content.

Version with bug

Release Candidate 1 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

All

Did you find any workaround?

No response

Relevant log output

No response

[SteveSandersonMS]

Also, probably a bigger problem is that this also affects more common vertical-scrolling web content when inside a TabbedPage on Android.

If you do a big swipe to try to scroll a long vertical distance, unless you manage to do a very exact vertical line with your finger, you'll accidentally trigger the horizontal scrolling behavior of the enclosing TabbedPage which is quite frustrating.

[Redth]

@PureWeen is there an API already to disable the swipe tab change on android? perhaps that would help?

[PureWeen]

@Redth We have a platform specific for android so you can enable/disable it which should start working once we merge this PR
#5831

Though we might want to look at making some smart choice here :-)
If the tab has a WebVIew then we just disable it unless the user has specifically enabled it

[SteveSandersonMS]

I’m not a regular Android user so I might be missing the conventions, but I would have thought the tab scroll behaviour should be suppressed only when the individual touch interaction starts within a webview. A tab might contain many things, only one of which might be a small webview.

However if that’s technically impractical then I recognise that the heuristic proposed above is better than the existing behaviour.

[PureWeen]

I’m not a regular Android user so I might be missing the conventions, but I would have thought the tab scroll behaviour should be suppressed only when the individual touch interaction starts within a webview. A tab might contain many things, only one of which might be a small webview.

However if that’s technically impractical then I recognise that the heuristic proposed above is better than the existing behaviour.

Agreed. We'll also want to make sure whatever we do here doesn't interfere with accessibility expectations.

[PureWeen]

Most likely fix for this

[VincentBu]

still repros with vs main build, here is an example:
MauiApp6487.zip

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[mfeingol]

@PureWeen: any updates on this issue. I've resumed porting my app to Maui with the current .NET 8.0 preview and ... this is still an issue. Thanks.

[matthewrdev]

@SteveSandersonMS @PureWeen A workaround for this is to disable UserInputEnabled on the ViewPager2 in the TabbedPage's OnHandlerChanged event:

    protected override void OnHandlerChanged()
    {
        base.OnHandlerChanged();

#if ANDROID
        var view = this.Handler.PlatformView;

        if (view is AndroidX.ViewPager2.Widget.ViewPager2 viewPager)
        {
            viewPager.UserInputEnabled = false;
        }
#endif
    }
    ```