.NET MAUI Blazor iOS Keyboard issue

Question

I’m developing a .NET MAUI Blazor application, and I’m facing an issue on iOS devices when an input field (e.g., a text box) is focused. As soon as the soft keyboard appears, my entire Blazor page becomes scrollable, including elements that should stay fixed (like a footer). This results in the entire page getting pushed up and allowing the user to scroll everything around—something I’d like to prevent. • I’ve already tried AdjustsForKeyboard = false; in my CreateWindow method, which is supposed to disable automatic keyboard panning on iOS, but the page still scrolls within the BlazorWebView. • I also attempted various CSS tricks (e.g., overflow: hidden; on html, body) to stop scrolling, but iOS still scrolls everything whenever the keyboard is active and an input field is in focus. • In Android, the behavior is correct by default—no unwanted scrolling happens. It’s specifically an iOS WebView issue.

Is there a way to completely disable the automatic scrolling behavior inside the BlazorWebView on iOS, so that the page remains in place and doesn’t get pushed up when the keyboard opens? Are there any .NET MAUI or iOS-specific settings, or perhaps JavaScript/CSS workarounds that others have successfully used to prevent this?

Thanks in advance for any insights!

Liyun Zhang - MSFT · Accepted Answer · 2025-01-13 09:03:34Z

0

You can try to make the webview scroll to to postion you want when the soft keyboard is shown. Just add the following code in the Page.cs.

        public bool IsShown;
        public float KeyBoardHeight;
        protected override void OnHandlerChanged()
        {
            base.OnHandlerChanged();
#if IOS
            var wkwebview = blazorWebView.Handler.PlatformView as WebKit.WKWebView;
            Foundation.NSNotificationCenter.DefaultCenter.AddObserver(UIKit.UIKeyboard.WillShowNotification,
                (e) => {
                    IsShown = true;
                    var userinfo = e.UserInfo;
                    if (userinfo != null)
                    {
                        var keyboardframevalue = userinfo[UIKit.UIKeyboard.FrameEndUserInfoKey] as Foundation.NSValue;
                        if(keyboardframevalue != null)
                        {
                            var keyboardframe = keyboardframevalue.CGRectValue;
                            KeyBoardHeight = (float)keyboardframe.Y;
                        }
                    };
            });
            Foundation.NSNotificationCenter.DefaultCenter.AddObserver(UIKit.UIKeyboard.WillHideNotification, (e) => { IsShown = false; });

            wkwebview.ScrollView.Scrolled += (s, e) =>
            {
                if (IsShown)
                {
                    wkwebview.ScrollView.ContentOffset = new CoreGraphics.CGPoint(0, KeyBoardHeight-100);
                    //CGPoint(X, Y), you can set Y = KeyBoardHeight - Footer's height
                }
            };
#endif
        }

edited Jan 13 at 9:03

answered Jan 13 at 3:30

Liyun Zhang - MSFT

15.3k1 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

iPXvD Jan 13 at 7:14

Thanks for your code example. Unfortunately, this means that I can no longer scroll at all. I would like to continue scrolling, but not the entire page. For example, I don’t want my footer, which is fixed at the bottom, to scroll. It should remain fixed behind the keyboard.

Liyun Zhang - MSFT Jan 15 at 2:46

You are welcome. I got the solution about how to fix the footer at bottom when the keyboard show. Please check it. @iPXvD

Leon Lu Jan 21 at 1:09

@iPXvD Maybe you miss the topic about accepted-answer? from the help center

Collectives™ on Stack Overflow

.NET MAUI Blazor iOS Keyboard issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related