Rendering issues on mobile web (iOS & Android)

[esDotDev]

We are seeing several issues on the Web for both iOS and Android, and some that are iOS only.

NOTE: It appears these are mostly due to bugs in flutters web renderer which is due for removal. Switching to canvaskit is more visually correct, but has performance/stability issues.

Test config

iOS is tested on an iPhone XR running iOS 17.1, Android is tested on a Samsung A52 w/ Android 13.

These screenshots are generated using the html web renderer. Some issues are fixed using canvaskit but others remain.

Issues

• ColorBurn blend mode not rendering correctly on Editorial Page

  • Additionally, on iOS, the background image is not rendering and the font weight is too heavy (shown below)
    

• Incorrect opacity for cloud images on Home Page. Should be semi-transparent, not opaque.
  

• No Particles are visible when viewing the Hidden Collectible discovery dialogue
  

• Hidden collectible icon is not visible throughout the app, although the "sheen" effect does show the correct outline. Note: this appears fixed using the beta channel.
  

• Hidden collectible icon is rendering incorrectly in the Collection Page, it appears the color blend mode is not working correctly. The icons should not be so bright here.
  

• (iOS Only) Text is represented as a white-box in Artifact Carousel Page
  

• (iOS Only) Images are shown as white boxes in the Photo Gallery Page