iOS Keyboard Breaks Constraint

[Topazoo]

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.

[LeesimEverglow]

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

[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

[LucasTejero]

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

[gem85247]

Having the same issue ...

[devashish-patel]

+1

[lanxuexing]

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,
          ),
        ),
      );
    }

[devashish-patel]

@lanxuexing -- I tried this but no success.

[gem85247]

@lanxuexing Issue persists...

[Topazoo]

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

[bizz84]

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:

• bizz84@4411f54

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.

[charafau]

@bizz84 any chance for PR ?

[bizz84]

I have tested this more extensively.

The layout errors disappear in the console log, but the keyboard still freezes sometimes.

Given that this is a hack, and it doesn't seem to work well, I don't think it's a good candidate for a PR.