WKWebKit takeSnapshot(with snapshotConfiguration:) not working on iOS device - ios

Question

Am I doing something wrong...?
On iOS, I am wanting to take a snapshot of a full web page. Until iOS 11, this previously wasn't possible without dealing with a whole bunch of logic to scroll the WKWebView's scrollView, etc.
The following bug was reported to Webkit and fixed: https://bugs.webkit.org/show_bug.cgi?id=161450
Resulting in this change: https://trac.webkit.org/changeset/212929/webkit
Which now gives us a nice API on iOS 11 to take snapshot of WKWebViews content: https://developer.apple.com/documentation/webkit/wkwebview/2873260-takesnapshotwithconfiguration
This is all pretty great, except, I simply cannot get a snapshot when using this method on a device. When running the app in Simulator it work's great.
I've added two images below for comparison. Both are the images that are returned with takeSnapshotWithConfiguration:completionHandler:, however one is blank for the most part.
I've tried playing around with the web view's frame, the configuration, etc. but with no luck.
I am thinking that perhaps Simulator links against the macOS version of WebKit and somehow it works fine there. One issue, as well is that the WKSnapshotConfiguration header also doesn't appear to be exposed in Swift, so I had to add a bridging header that imports it.
Here's a sample project for anyone who's curious: https://github.com/runmad/WebKitSnapshotTest
UPDATE 10/20:
So this fixes it but is a nasty hack:
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
// webView.scrollView.contentSize == .zero initially, so put in a delay.
// It still may be .zero, though. In that case we'll just call the
// delegate method again.
let deadlineTime = DispatchTime.now() + .milliseconds(300)
DispatchQueue.main.asyncAfter(deadline: deadlineTime) {
guard webView.scrollView.contentSize.height > 0 else {
self.webView(webView, didFinish: navigation)
return
}
// So this works... If you set the .frame of the webView
// to that of the just loaded .scrollView and then load the
// same URL again, the resulting .frame and .scrollView will
// be the same size and the image render on a device will be
// the correct size.
guard self.hasLoadedOnce else {
webView.frame = CGRect(x: self.view.bounds.width, y: 0, width: self.view.bounds.width, height: webView.scrollView.contentSize.height)
webView.load(URLRequest(url: URL(string: "https://www.apple.com")!))
self.hasLoadedOnce = true
return
}
webView.snapshotWebView(completionHandler: { (image, _) in
self.updateWith(image)
})
}
}
So couple of issues:
(asyncAfter I knew of this one already and had that in there) Have to add a delay for the snapshot, since the scrollView still might be .zero for a little bit
Setting the size of the frame of the WKWebView to that of the correct scrollView size wasn’t working
Setting the frame and THEN RELOADING the WKWebView in what will be it’s true size works
UPDATE 03/11:
My radar (35094298) was duped today to 33812691 and closed, which means Apple is aware of the issue, at least.

Answer 1

Swift 4
Here's what worked for me (note: I used the extension from the sample project provided).
Inside the webView(didFinish navigation) I used JS to find the content width and height. I then set a global rect variable in order to pass it to snapshot() later in a button press. I could not get the snapshot() to work when included in the following code after the constraint is set.
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
// To get the constraints properly set for preparation for the snapshot, the setup must be performed here.
self.webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
if complete != nil {
self.webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (height, error) in
guard let contentHeight = height as? CGFloat else { print("Content height could not be obtained"); return }
self.webView.evaluateJavaScript("document.body.scrollWidth", completionHandler: { (width, error) in
let contentWidth = width as! CGFloat
self.rect = CGRect(x: 0, y: 0, width: contentWidth, height: contentHeight)
self.heightConstraint.constant = contentHeight
// Because it is known that the web page has completely loaded, it is safe to enable a snapshot to be taken
self.takeSnapButton.isEnabled = true
})
})
}
})
}
For me, taking a snapshot() had to be a new action, in my case, a separate button press. My conclusion is that the constraint needs to be set and the view reloaded in order for the content to properly resize.
#IBAction func takeSnapButton(_ sender: Any) {
// It is probably safe to assume that there is definitely an image at this point but to be extra
guard let image = self.webView.snapshot(of: self.rect) else { print("An image could not be taken"); return}
}