Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WKWebView web inspector in macOS app fails to render and flickers/flashes

I have enabled developer extras for my WKWebView, but when I select "Inspect Element" from the dropdown, the inspector does not render properly. It's basically transparent, and the bottom half of the web view flickers and flashes, but no inspector content ever appears.

I can resize the window to be too small for the inspector, and then when I Inspect Element the inspector appears as an external window, and everything works properly. However, adding a window-resize/invoke-inspector/window-resize to every test cycle in rather painful.

Acceptable answers may include:

  1. Any way to fix the flickering in the WKWebView internal inspector,
  2. Swift/Objective-C code for invoking the external inspector window programmatically,
  3. JavaScript code for invoking the external inspector window programmatically

... or any other ideas for how to tackle this.

Seen under 10.14 (Mojave) and 10.15 (Catalina). Any help or ideas are greatly appreciated.

like image 877
DesignDB Avatar asked Mar 17 '20 17:03

DesignDB


1 Answers

The issue appears to be with using constraints on a WKWebView. If you have an autolayout view and a WKWebView, turning off constraints fixes the inspector rendering. In my app, the UI is just a big browser window, so I could turn off autolayout for the view, add springs and struts, and everything renders properly.

I hate answering my own question, but...

like image 52
DesignDB Avatar answered Nov 16 '22 18:11

DesignDB