ios11 webview html canvas content got cleared by page scroll

Question

The html page I made by using canvas becomes different in ios11!

When first show in the webview, the page looks fine, but, when it scrolls down and the canvas in it becomes invisible in the viewport, the content in the canvas disappears and never comes back when the page scroll back to top.

Does somebody know how to fix this problem or I should just wait until apple fixes it later?

Answer 1

Same problem for me. I noticed that if I toggle in Safari Web Inspector any properties of the canvas, it is rendered again. Another similar issue is reported on SO (Cordova Webview canvas redering bug on recent iOS versions (10.3.1)).

So my plan is to detect the scroll event on top and force a redraw of the DOM element. I decided to use scrollstop event since scroll event is not well supported on mobile device. The touchmove event is working as well but it is not as good as scrollevent because it only occurs when the finger touches the screen.

$('#my-canvas').on({
    'scrollstop': function(e) {
        // e.scrollTop() doesn't work... so
        console.log($(window).scrollTop()); 
        if ($(window).scrollTop() === 0) {
           console.log("Redraw of the canvas");
           $('#my-canvas').hide().show(0);
        }
    }
});

Not convinced it is diamond code but it just works on iOS.

PS: The problem is maybe only existing for the legacy web view and not the WkWebView. But this last one is so challenging with a lot of different network'issues that i never was able to use it.