Painter graphic display error

[yueyuzhao]

Expected Behavior

The white space around maincanvas in paintframe should be absolutely white.

Actual Behavior

Some grey random image shows in that area and it may change when switch the app from background to foreground or click buttons on the right or color palette on the bottom.

Steps to Reproduce

1. force quite the app if running
2. create a new project
3. click the paint button of the kitten
4. send the app the background and bring it to foreground
5. click buttons or doing other things may change the random images

Device and Operating System

Fire HD 8 (2017) FireOS 5.6.8.0 Android 5.1

User Agent

Mozilla/5.0 (Linux; Android 5.1.1; KFDOWI Build/LVY48F; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/90.0.4430.91 Safari/537.36

[yueyuzhao]

This issue might be related to other wired display issues like #443, #444, #445, #446, #447, #448 as well as #337.

I think it is not a simple issue. Some possible reasons:

• Memory leaks: we are using dual pages in our app, but the memory may not be cleaned up when the url changes. You can see the memory usage keeping increased when switch pages via the Profiler provided by Android Studio. To solve this, we can use the Fragment wrapping a WebView and create a new one after page changes and destroy the old one. To speed up, we can create a new Fragment after on the page load finished and bring it to live when navigating to different locations.

• GPU rendering issue: we are using a lot of SVGs both as image and background and that may make the hierarchy of view too many levels which causes the GPU rendering a lot. If we enable the profiler, we can inspect the output. To solve this, we can

  1. transform SVG icons to font or PNG to reduce computing
  2. rewrite the stage with canvas.
  3. reduce overdraw (From https://developer.android.com/topic/performance/rendering/overdraw):
     1. Removing unneeded backgrounds in layouts.
     2. Flattening the view hierarchy.
     3. Reducing transparency.

[yueyuzhao]

On some blogs, they said that it's the hardware acceleration https://developer.android.com/guide/topics/graphics/hardware-accel that causes this errors. I tried to disable the hardware acceleration by android:hardwareAccelerated="false" in the AndroidManifest.xml, this error disappers, but the loading animation when opening projects lost, just like the issue https://github.com/LLK/scratchjr/issues/390. Maybe an easy approach to this is turning on/off the hardware acceleration in different scenarios.

[yueyuzhao]

Note that this issue can't be reproduced on the same device right after reset to factory, and the UA shows Mozilla/5.0 (Linux; Android 5.1.1; KFDOWI Build/LVY48F; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/84.0.4147.125 Safari/537.36 and the Amazon System WebView is on the version version 84.amazon-webview-v84-4147-tablet.4147.125.93. But after I close the library and select a background for the project, it shows a different error which is not posted before.

But take a look at the thumbnail generated for this page on the top right corner, it shows well pretty well. I do think that changing the stage from SVG to canvas is not a bad idea.

[deepankarmalhan]

Create an epic to go through all the issues, Donald can help if he has capacity.

[deepankarmalhan]

Add #448 in the epic as well.

[deepankarmalhan]

Add #444 in the epic as well.