canvas - ios11 webview html canvas 内容被页面滚动清除

Question

我用canvas制作的html页面在ios11中变得不一样了!

当第一次在 webview 中显示时，页面看起来很好，但是，当它向下滚动并且其中的 Canvas 在视口(viewport)中变得不可见时， Canvas 中的内容就会消失，并且当页面滚动回顶部时永远不会回来。

有人知道如何解决这个问题还是我应该等到苹果稍后修复它？

Answer 1

对我来说同样的问题。我注意到，如果我在 Safari Web Inspector 中切换 Canvas 的任何属性，它会再次呈现。 SO ( Cordova Webview canvas redering bug on recent iOS versions (10.3.1) ) 上报告了另一个类似的问题。

所以我的计划是检测顶部的滚动事件并强制重绘 DOM 元素。我决定使用scrollstop事件，因为scroll event is not well supported on mobile device 。 touchmove事件也可以工作，但它不如scrollevent，因为它只在手指触摸屏幕时发生。

$('#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);
        }
    }
});

不相信这是钻石代码，但它只适用于 iOS。

PS:该问题可能仅存在于旧版 Web View 中，而不存在于 WkWebView 中。但这最后一个对于许多不同的网络问题来说是如此具有挑战性，以至于我从未能够使用它。