Xamarin.Forms slow to render correct page layout on iOS

Viewed 59

We are developing a game on iOS and Android that uses Xamarin.Forms and SkiaSharp. I'm experiencing a slightly odd performance issue on iOS (Android works fine) in which Xamarin updates the layout of labels and canvases on a menu page visibly slowly, including changing font on the labels. Here's a video of the slow rendering of the menu's layout (use 720p quality), in which you can see that when I open a new menu or return to the previous one, then maybe for 50ms the menu heading fonts and texts are what they were in the prior menu. The effect is especially clear in the first menu opening and its subsequent close; maybe less so when opening Delete Saved Game. Also, the position of the actual menu items (drawn via SkiaSharp canvas) is a bit too high or low, since the first menu heading font (GnollHack) is much bigger than the font used in the Load Saved Game menu. The video has been recorded on remote testing webpage, but we experience the same problem on real devices, too.

This seems to be an issue of the Xamarin layout rendering a few times in the first few milliseconds instead of just once when the menu display code (in function ShowMenuCanvas) is finished.

The page code is in GamePage.xaml.cs in GitHub at the folder https://github.com/hyvanmielenpelit/GnollHack/tree/master/win/win32/winclisrv/GnollHackClient/GnollHackClient/Pages/Game

In GamePage.xaml, MenuGrid holds this menu page to be shown. The labels are currently CustomLabel class, but we experienced the same issue with a normal Xamarin label, too.

Since Android works fine, this seems to be an iOS issue, and probably related to Xamarin and its layout cycle. Do you know what may be causing this slow layout rendering behavior and how to enforce everything to be updated once and in one go at the same time?

0 Answers
Related