scrollIntoView causes WKWebView to be partially unresponsive

727 views Asked by At

I'm having a problem with my hybrid iOS application, in iOS 11 beta. It is basically a web app running within a WKWebView. The problem does not exist in iOS 10, but has been introduced with iOS 11. As of beta 8, the problem is still reproducible.

When the webapp calls the JavaScript function scrollIntoView a couple of times, parts of the GUI becomes unresponsive.

The following reduced HTML file demonstrates the problem:

<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
        <meta id="viewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
            <title>Testcase</title>
            <script>

                let numClicks = 0;

                function runScrollIntoView() {
                    document.querySelector(".element-1").scrollIntoView();
                }

            function debugInfo() {
                return {
                    "window.screen.height": window.screen.height,
                    "window.screen.availHeight": window.screen.availHeight,
                    "document.body.scrollTop": document.body.scrollTop,
                    "document.body.scrollHeight": document.body.scrollHeight

                };
            }

            function clickHandler() {
                numClicks++;
                document.querySelector('.counter').innerText += numClicks + " clicks, " + JSON.stringify(debugInfo()) + "\n";
            }
            </script>

            <style>
                .instructions div {
                    border: 1px solid blue;
                    color: blue;
                }

            .counter {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }

            </style>

</head>
<body>

    <div class="instructions">
        <div onclick="clickHandler()">1. Click me to run click handler</div>
        <div onclick="runScrollIntoView()">2. Click me to run Element.scrollIntoView</div>
        <div onclick="clickHandler()">3. Click me to run click handler again</div>
        <div onclick="runScrollIntoView()">4. Click me to run Element.scrollIntoView again</div>
        <div onclick="clickHandler()">5. Click me to try run click handler again - nothing happens</div>
        <div>(Repeat 4-5 if necessary)</div>
    </div>

    <div class="counter">
        Number of clicks
    </div>

    <div class="element-1">Target to scrollIntoView</div>

</body>
</html>

... when being loaded with this viewcontroller:

import UIKit
import WebKit
import Foundation
import SystemConfiguration

class ViewControllerNgf: UIViewController, WKNavigationDelegate, WKUIDelegate {

    var webView: WKWebView!

    override func loadView() {
        self.webView = WKWebView(frame: CGRect.zero)
        webView.navigationDelegate = self
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.loadWebApp()
    }

    fileprivate func loadWebApp() {
        let htmlFile = Bundle.main.path(forResource: "htmlfile", ofType: "html")
        let html = try? String(contentsOfFile: htmlFile!, encoding: String.Encoding.utf8)

        DispatchQueue.main.async {
            self.webView!.loadHTMLString(html!, baseURL: nil)
        }
    }
}

I have reported this as a bug to Apple, but no response yet, leading me to think I'm doing something wrong in the app. But the Swift code is basically copied from Apple's documentation.

So what could be the problem?

1

There are 1 answers

1
Vidar S. Ramdal On BEST ANSWER

The problem seems to have been resolved in iOS 11.2.