WKWebView pinch-to-zoom in iOS10

Question

I encountered a problem that after I upgraded my phone to iOS 10 beta 3, when I zoom a WKWebView in my app, the zooming function not only zoom the content of the web page but also the page itself.

See the image I attached. WKWebView that fails to zoom correctly. I set the background color of the WKWebView to blue, when I pinch to zoom out the view, the page(container?) itself also zoomed out, causing unfavorable result. It does not happen in iOS9. When I do the same thing, the blue background does not show. The web page is written in AngularJS and the Graph lib is d3js.

The related code are as below.

-(void) reloadWebPage{
    [activityIndicator startAnimating];
    NSString *indexToPath = [self getIndexHtmlPath];
    NSURL *fileUrl = [NSURL fileURLWithPath:indexToPath];
    NSURL *absoluteUrl = fileUrl.absoluteURL;
    if(currentGroup == nil){
        currentGroup = @"0";
    }
    NSString *absoluteString = [[absoluteUrl absoluteString] stringByAppendingFormat:@"%@%@", @"?currentGroup=", currentGroup];
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:absoluteString] ];
    [webView loadRequest:request];

}

- (void)createWebView{

    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    [config.userContentController addScriptMessageHandler:self name:@"interOp"];
    webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:config];
    [webView setBackgroundColor:[UIColor blueColor]];
    [webView setNavigationDelegate:self];
    [webView setUIDelegate:self];
}

I have no clue where is the problem? Is it in Objective C,iOS10 or in Javascript?
Please suggest, How can I resolve this problem?

Thank you

Possible duplicate of disable viewport zooming iOS 10 safari? — Roman Ermolov
The link you mentioned intended to disable zooming, I don't want to disable it. Besides, I didn't use user-scalable=no either. — Yu-Kai Tseng
Yes, I did. Please see the link "WKWebView that fails to zoom correctly." in the question. — Yu-Kai Tseng

Yu-Kai Tseng Yu-Kai Tseng · Accepted Answer · 2016-08-08T06:48:10

Ok, I resolved this problem by disabling zooming and scrolling in WKWebView.

webView.scrollView.scrollEnabled = false;

- (UIView*) viewForZoomingInScrollView:(UIScrollView *)scrollView{ return nil; }

After these code are added, the WKWebView itself no longer zooming and moving while the nodes move and zoom normally.

It seems the problem somewhat related to Disable magnification gesture in WKWebView, but I still don't know what caused the change from iOS9 to iOS10. But it seems to work for me.

WKWebView pinch-to-zoom in iOS10

1 Answers