WKWebView constrains issue when keyboard pops up

Question

When an input in WKWebView gets focused a constraints error pops up.

Code:

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad();
        let wv = WKWebView(frame: CGRect(x: 100, y: 100, width: 100, height: 100));
        wv.loadHTMLString("", baseURL: nil); // it also can be select, it makes no difference
        view.addSubview(wv);
    }
}

Error Log:

2017-11-05 00:26:28.861439+0700 achievator[20048:75393577] [LayoutConstraints] Unable to simultaneously satisfy constraints.    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)  (
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "=8)-|   (active, names: '|':_UIButtonBarButton:0x7f854050e7f0 )>",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "" )

Will attempt to recover by breaking constraint  =8)-|   (active, names: '|':_UIButtonBarButton:0x7f854050e7f0 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in  may also be helpful. 2017-11-05 00:26:28.863156+0700 achievator[20048:75393577] [LayoutConstraints] Unable to simultaneously satisfy constraints.     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)  (
    "",
    "",
    "",
    "",
    "",
    "",
    "=5)-[_UIModernBarButton:0x7f8540510b40]   (active, names: '|':_UIButtonBarButton:0x7f854050ea30 )>",
    "=5)-|   (active, names: '|':_UIButtonBarButton:0x7f854050ea30 )>",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "" )

Will attempt to recover by breaking constraint  =5)-|   (active, names: '|':_UIButtonBarButton:0x7f854050ea30 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in  may also be helpful.

user_1397079 · Answer

My assumption is this a bug in ios 11. The complaints are about the components in the button bar for the keyboard which are all using default values set by the os. I have run the same code on both ios 9 and ios 10 and get no error messages.

user_7668778 · Answer

One or more constraints are not compatible at the same time when keyboard is open.

Instead of doing frame by hand, try setting constraints to ur WKWebView.

private func addWKWebView(){
    let wv = WKWebView()
    view.addSubview(wv);
    wv.translatesAutoresizingMaskIntoConstraints = false


    wv.widthAnchor.constraint(equalTo:   view.widthAnchor  ).isActive = true
    wv.heightAnchor.constraint(equalTo:  view.heightAnchor ).isActive = true
    wv.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    wv.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
}

or Something like this:

private func addWKWebView(){
    let wv = WKWebView()
    view.addSubview(wv);
    wv.translatesAutoresizingMaskIntoConstraints = false


    wv.widthAnchor.constraint(equalToConstant:  100).isActive = true
    wv.heightAnchor.constraint(equalToConstant: 100).isActive = true
    wv.widthAnchor.constraint(equalToConstant:  100).isActive = true
    wv.heightAnchor.constraint(equalToConstant: 100).isActive = true
}

U need to play around with your constraints to set the WkWebView where u want.

user_10778665 · Answer

I also have this problem when I need my custom-keyboard pop up. Finally, all I need to do is change the html input-element's eventType: from "touchstart" to "click" .

Origin:

    function setUpEvent(elem, eventType, handler) {
        return (elem.attachEvent ? elem.attachEvent("on" + eventType, handler)
            : ((elem.addEventListener) ? elem.addEventListener(eventType, handler, false) : null));
    }

    window.onload = function () {

        var input_ele = document.getElementById('YOUR_ELE_NAME');
        setUpEvent(input_ele, "touchstart", function (e) {

            //showKeyboard();//my personal function to show keyboard
        });
    }

And it works:

    function setUpEvent(elem, eventType, handler) {
        return (elem.attachEvent ? elem.attachEvent("on" + eventType, handler)
            : ((elem.addEventListener) ? elem.addEventListener(eventType, handler, false) : null));
    }

    window.onload = function () {

        var input_ele = document.getElementById('YOUR_ELE_NAME');
        setUpEvent(input_ele, "click", function (e) {//change here

            //showKeyboard();//my personal function to show keyboard
        });
    }

WKWebView constrains issue when keyboard pops up

4 Answers