ios11 webview html画布内容已被页面滚动清除

2023年5月29日 245次阅读

我使用canvas制作的html页面在ios11中变得与众不同！

当首次在webview中显示时,页面看起来很好,但是,当它向下滚动并且其中的画布在视口中变得不可见时,画布中的内容会消失,并且当页面滚动回顶部时永远不会返回.

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

最佳答案 对我来说同样的问题.我注意到如果我在Safari Web Inspector中切换画布的任何属性,它将再次呈现.在SO(
Cordova Webview canvas redering bug on recent iOS versions (10.3.1))上报道了另一个类似的问题.

所以我的计划是检测顶部的滚动事件并强制重绘DOM元素.我决定从scroll event is not well supported on mobile device开始使用scrollstop事件.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视图而不是WkWebView.但最后一个是如此具有挑战性,有很多不同的网络问题,我从来没有能够使用它.

点赞