Blazor Hybrid iOS Disable Elastic Scrolling

[TanayParikh]

Final question: is there any straightforward way for a developer to prevent the overscroll/bounce effect when scrolling the root scroll container? Having overscroll at the page root makes it feel like not-a-real-app, since fixed/sticky menus bounce around in a way they wouldn't if it was a native app.

This is a longstanding problem for PWAs on iOS that is solvable on Electron. It would be great if this is solvable easily on MAUI too.

Originally posted by @SteveSandersonMS in https://github.com/dotnet/maui/issues/6432#issuecomment-1108732226

[TanayParikh]

Suggested workaround by @jfversluis: https://github.com/dotnet/maui/pull/6432#issuecomment-1112435476

[javiercn]

@TanayParikh I imagine this is not for RTM, is it?

[TanayParikh]

@TanayParikh I imagine this is not for RTM, is it?

No not for RTM/GA. This is more of a "nice to have"/enhancement (unless Steve feels differently based on the original comment)

[SteveSandersonMS]

I don't think it's ship-blocking for GA, but it will stand out as being something people want to do right from the beginning, so I do think we should plan this for 7.0.

[AswinPG]

I don't think it's ship-blocking for GA, but it will stand out as being something people want to do right from the beginning, so I do think we should plan this for 7.0.

100% agreed

[jirisykora83]

It is tagged as ios but isn't same issue with android 12? Or there is something what can be done for Android right now?

[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.

[Ghevi]

Suggested workaround by @jfversluis: #6432 (comment)

I'm sorry, I don't quite understand what the workaround is. Do I have to implement a custom rendered for the BlazorWebView like this? I'm tagging @jfversluis (sorry for bothering you, if you can point me into some direction it would be great!)

public class WkWebViewCustomRenderer : Microsoft.Maui.Controls.Handlers.Compatibility.ViewRenderer<BlazorWebView, WKWebView>
{
        protected override void OnElementChanged(ElementChangedEventArgs<BlazorWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var config = new WKWebViewConfiguration();
                var webView = new WKWebView(Frame, config);
                webView .ScrollView.Bounces = false;
                webView .ScrollView.ScrollEnabled = false;
                SetNativeControl(webView );
            }
            if (e.NewElement != null)
            {
                Control?.LoadRequest(new NSUrlRequest(new NSUrl("https://0.0.0.0")));
            }
        }
    }

[itsKXCode]

Any news on this? There is no documentation on how to implement a custom renderer for BlazorWebView.

Creating a Custom Handler for WebView and disabling the Bounce property on that is also not working.

[Graphikos]

We solved this with CSS setting the body with overflow: hidden; and having main content in a position: fixed; div filling the whole viewport (ie. left, right, top, bottom set to 0). A "tab bar" is also position fixed to the bottom of the viewport. With this setup, the main page doesn't have elastic scrolling so it doesn't cause any issues, yet the main content div still scrolls (with elastic) as expected.

Hope this helps!

[scottkuhl]

Can someone please post what the workaround is for this? No one has answered @Ghevi from 6 months ago or @itsKXCode either.

@Graphikos solution seems very app specific and handling this in CSS and JavaScript is a game of cat and mouse with Apple as people find solutions and Apple breaks them.

[scottkuhl]

BTW, I don't consider this to be a "nice-to-have". It immediately sets all Blazor Hybrid applications into a non-native feeling application.

[axylophon]

Yeah we really need an improvement here. The Hybrid App does not have a good feeling right now in iOS.

Does anybody have a "good" solution for this?

[scottkuhl]

This worked for me:

html {
    overscroll-behavior: none;
}
	
body {
    overflow-y: scroll;
}

[monsieurvor]

Based on two answers above, on Android, this combination works for me:

// app.css html { overscroll-behavior: none; }

body { overflow: hidden; }

// mainlayout.css main { position: fixed; left: 0; right: 0; top: 0; bottom: 0; overflow-y: scroll; }

[scarabdesign]

The CSS workaround does not work when there are input fields in an independently scrollable area.

The HTML tag will have scrollTop and scrollLeft attributes applied that scrolls the focused element into view. This by itself may be acceptable, however, removing focus from the element doesn't reset the scrolled attributes and the page is stuck off center while overflow: hidden on the body prevents even user interaction from correcting the issue.

Disabling bounce is essential.

[ppereira-serviceonsites]

Noticed this was removed from Consideration... Hoping that means that its going into dev soon? Please let us know!

I am needing to know if this will be fixed in order to make a decision on approach.

[SpikeThatMike]

This answer works for me on IOS 15.8 https://github.com/dotnet/maui/discussions/8172#discussioncomment-8676447

Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("Disabel_Bounce", (handler, view) => {
    #if IOS 
    handler.PlatformView.ScrollView.Bounces = false;
    #endif
});