flutter_webview_plugin iOS Keyboard Breaks Constraint

iOS Keyboard Breaks Constraint

Open Topazoo opened this issue 5 years ago • 16 comments

Webview is causing UI issues when the keyboard is opened on iOS. The error is consistent across iOS versions 10-12 and across multiple devices. This occurs when the webview is housed in a Rect.

Error message:

Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ("<NSAutoresizingMaskLayoutConstraint:0x600001297160 h=-&- v=-&- _UIToolbarContentView:0x7fcfbbc0d500.width == UIToolbar:0x7fcfbbc0ce90.width (active)>", "<NSLayoutConstraint:0x600001280550 H:|-(0)-[_UIButtonBarStackView:0x7fcfbbd45fa0] (active, names: '|':_UIToolbarContentView:0x7fcfbbc0d500 )>", "<NSLayoutConstraint:0x6000012805a0 _UIButtonBarStackView:0x7fcfbbd45fa0.trailing == _UIToolbarContentView:0x7fcfbbc0d500.trailing (active)>", "<NSLayoutConstraint:0x60000129e3f0 H:|-(8)-[_UIModernBarButton:0x7fcfbbd68f00'Done'] (active, names: '|':_UIButtonBarButton:0x7fcfbbd68370 )>", "<NSLayoutConstraint:0x60000129db80 H:[_UIModernBarButton:0x7fcfbbd68f00'Done']-(20)-| (active, names: '|':_UIButtonBarButton:0x7fcfbbd68370 )>", "<NSLayoutConstraint:0x6000012f2120 'UISV-canvas-connection' UILayoutGuide:0x6000008d4a80'UIViewLayoutMarginsGuide'.leading == _UIButtonBarButton:0x7fcfbbd64ff0.leading (active)>", "<NSLayoutConstraint:0x6000012f2170 'UISV-canvas-connection' UILayoutGuide:0x6000008d4a80'UIViewLayoutMarginsGuide'.trailing == _UIButtonBarButton:0x7fcfbbd68370.trailing (active)>", "<NSLayoutConstraint:0x6000012f21c0 'UISV-spacing' H:[_UIButtonBarButton:0x7fcfbbd64ff0]-(0)-[UIView:0x7fcfbbd67600] (active)>", "<NSLayoutConstraint:0x6000012f2210 'UISV-spacing' H:[UIView:0x7fcfbbd67600]-(0)-[_UIButtonBarButton:0x7fcfbbd677e0] (active)>", "<NSLayoutConstraint:0x6000012f2260 'UISV-spacing' H:[_UIButtonBarButton:0x7fcfbbd677e0]-(0)-[UIView:0x7fcfbbd68190] (active)>", "<NSLayoutConstraint:0x6000012f22b0 'UISV-spacing' H:[UIView:0x7fcfbbd68190]-(0)-[_UIButtonBarButton:0x7fcfbbd68370] (active)>", "<NSLayoutConstraint:0x600001297110 'UIView-Encapsulated-Layout-Width' UIToolbar:0x7fcfbbc0ce90.width == 0 (active)>", "<NSLayoutConstraint:0x6000012802d0 'UIView-leftMargin-guide-constraint' H:|-(0)-UILayoutGuide:0x6000008d4a80'UIViewLayoutMarginsGuide' (active, names: '|':_UIButtonBarStackView:0x7fcfbbd45fa0 )>", "<NSLayoutConstraint:0x600001280370 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x6000008d4a80'UIViewLayoutMarginsGuide']-(0)-|(LTR) (active, names: '|':_UIButtonBarStackView:0x7fcfbbd45fa0 )>") Will attempt to recover by breaking constraint <NSLayoutConstraint:0x60000129db80 H:[_UIModernBarButton:0x7fcfbbd68f00'Done']-(20)-| (active, names: '|':_UIButtonBarButton:0x7fcfbbd68370 )> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

Dec 23 '18 11:12 Topazoo

I have the same question, when i use textfield to input words, i cant see what i am typing

Dec 24 '18 07:12 LeesimEverglow

Android has the same question, no error message ,but when textfield became first resposer ,the keyboard change the widget to top ,so i cant see what i am typing

Dec 24 '18 10:12 LeesimEverglow

I have the same problem when I tried to open the keyboard.

Dec 29 '18 18:12 LucasTejero

Having the same issue ...

May 01 '19 12:05 gem85247

May 18 '19 12:05 devashish-patel

I have the same problem, I tried the following @LeesimEverglow

  if (Platform.isIOS) {
      return WebviewScaffold(
        appBar: _buildAppBar(context),
        url: _launchURL,
        withJavascript: true,
        supportMultipleWindows: true,
        withLocalStorage: true,
        withZoom: true,
      );
    } else if (Platform.isAndroid) {
      return new Scaffold(
        appBar: _buildAppBar(context),
        body: SafeArea(
          top: true,
          bottom: true,
          child: WebviewScaffold(
            url: _launchURL,
            withJavascript: true,
            supportMultipleWindows: true,
            withLocalStorage: true,
            withZoom: true,
          ),
        ),
      );
    }

May 18 '19 18:05 lanxuexing

@lanxuexing -- I tried this but no success.

May 18 '19 18:05 devashish-patel

@lanxuexing Issue persists...

May 19 '19 00:05 gem85247

I think the issue described by @LeesimEverglow (the keyboard pushing the Webscaffold widget up on Android) and the potential solution posted by @lanxuexing may be a separate bug entirely. I encountered it too, but it didn’t always throw the constraint error on iOS...

May 19 '19 01:05 Topazoo

Apparently this has been an issue on WKWebView since iOS 11:

https://stackoverflow.com/questions/47113661/wkwebview-constrains-issue-when-keyboard-pops-up
https://stackoverflow.com/questions/46993890/wkwebview-layoutconstraints-issue

Turns out, the layout errors appear when the input accessory view is presented.

This Q/A shows how to hide it using private APIs & method swizzling:

https://stackoverflow.com/questions/32546394/hiding-keyboard-accessorybar-in-wkwebview

I forked this plugin and made the necessary changes here:

https://github.com/bizz84/flutter_webview_plugin/commit/4411f54a4526561197821cc65e29232fe267835a

With this fix, the layout problems have disappeared. I still observe a white rectangular area above the keyboard in my app. But the input is no longer stuck and I can type.