Cordova Webview canvas redering bug on recent iOS

2019-07-24 02:24发布

问题:

I have an app that is built with PhoneGap. One page in the app copies the contents of other page's canvases as images. This worked fine on older versions of iOS, but recently I noticed that the copied canvases are sometime blank. The rest of the page is rendered correctly. I don't know which iOS version it crept in, but I'm currently running iOS 10.3.1 on my iPad Pro. This does not happen when the same code is running as a WebApp in mobile Safari (or Chrome, or on my Mac laptop browsers).

Using the debugger on the App, I can restore the page by simply toggling the display property. This indicates to me that it's a rendering bug in the built-in Webview that Cordova uses. I currently have a patch that toggles the display property. This works, but it causes flickering even with requestAnimationFrame() or SetTimeout(fn, 0).

The app is built with cli-6.5.0 using PhoneGap Build.

Has anyone else seen this bug or have a better patch?

Follow up: Toggling visibility fixes the flickering. When the problem occurs the canvas behaves like it's not visible, but the DOM reports that it is. Also the problem seems to occur when the canvas is copied under an Ajax callback. Delaying the processing with setTimeout() does not solve the problem.