Mac Catalyst on macOS does not render well when resizing an app

[ArchieCoder]

Current behavior

Resizing the app causes multiple rendering issues

https://github.com/unoplatform/uno/assets/1608424/410f9655-2559-4fea-a1ca-a28c104fc721

Expected behavior

Rendering should be using full window only

How to reproduce it (as minimally and precisely as possible)

Contact me for the sample project

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

Mac Catalyst

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[ArchieCoder]

White using the LiveCharts, I see this bad rendering on MacOS. There is also the black background that should be white like Windows and Linux.

I don't know if it is related with the library, skia or Uno.

[spouliot]

Weird, it's like something is not aware of (all?) the resizing.

I don't know if it is related with the library, skia or Uno.

If it's fine with Windows and Linux then it's probably a Uno, macOS-specific issue.

Contact me for the sample project

Can you share a test case with me ? Sebastien at platform dot uno

Thanks!

[agneszitte]

Weird, it's like something is not aware of (all?) the resizing.

I don't know if it is related with the library, skia or Uno.

If it's fine with Windows and Linux then it's probably a Uno, macOS-specific issue.

Contact me for the sample project

Can you share a test case with me ? Sebastien at platform dot uno

Thanks!

@ArchieCoder not sure if you had the chance to send a test case to @spouliot for this issue

[ArchieCoder]

@agneszitte the project was sent on May 21st, @spouliot replied: "je regarde ça asap" :)

FYI: Mac Catalyst is not target platform anymore for me when I learned more about it. Skia / Mac does the job.

It's up for the Uno team to close it or not since I won't use catalyst.

[agneszitte]

@agneszitte the project was sent on May 21st, @spouliot replied: "je regarde ça asap" :)

FYI: Mac Catalyst is not target platform anymore for me when I learned more about it. Skia / Mac does the job.

It's up for the Uno team to close it or not since I won't use catalyst.

Thank you for the feedback @ArchieCoder, appreciated. @spouliot will be able to look at this for Uno depending on the priorities on his side.

[spouliot]

I can confirm that the provided code has issues with Catalyst (similar to the original video) but works fine on desktop/macOS.

OTOH the livechart looked good to me.

[ArchieCoder]

FYI, I created this GitHub issue just in case it was a bug from the library last month https://github.com/beto-rodriguez/LiveCharts2/issues/1512

[spouliot]

Thanks, I'll follow up on that issue for the graph. It seems, at least partially, related to the animation and a later redraw makes it look good (but with a black background).

[spouliot]

Same app/code running side-by-side on macOS

net8.0-desktop on the left side

• Looks fine

net8.0-maccatalyst on the right side

Resize Issue

• Looks smaller. In the above image it seems to fit the Height instead of the Width, which produce a grey band on the right.
  • Multiple resizing can show grey bands on both bottom and right sides. There seems to be a disconnect between the rendering size and the actual window size.

Live Chart Issue

• Black backgrounds on live charts
• Not visible in the first screenshot (see below) but updates on live charts do not seem to clear previous drawings (unless a redraw is made).
• Graph rendering seems affected by DPI changes, e.g. when moving between 1x and 2x screens.
  • This is not something the original iOS code would had have to deal with...

[spouliot]

Origin Resize Issue

After some resizing the catalyst app (right) can have a grey bar (incorrect origin?) at the top of the window too.

Variable Right Grey Band Size

The size of the "grey band" (on the right) is related to showing/hiding the left menu list. Depending on with width of the app's main window, this list is either:

• visible, with both icon and text
• visible, with icon only
• not visible

Changing the state of the list leads to different band size as seen in the next 3 screenshots:

Fonts issue

The catalyst app does not find the Segoe UI fonts (see logs below) while this does not seem to be an issue with the desktop (skia) version.

That can explain why all the text looks smaller on the catalyst version, which in turn makes it show more content (since some elements are smaller). More a size issue than a resize issue.

[0:] Windows.UI.UIFontHelper: Warning: Failed to get system font based on Segoe UI-DemiBold
2024-06-20 10:31:38.233 ElementsTechnician[89326:160262623] W/Windows.UI.UIFontHelper: Failed to get system font based on Segoe UI-DemiBold 
[0:] 06-20 10:31:38.233-04:00 W/Windows.UI.UIFontHelper: Failed to get system font based on Segoe UI-DemiBold 
[0:] Windows.UI.UIFontHelper: Warning: Failed to get system font based on XamlAutoFontFamily

The lack of this font (on some platforms, like macOS) is a known issue: https://github.com/unoplatform/uno/issues/3954

[jeromelaban]

The fonts issue is being address, apps will use OpenSans by default.

[spouliot]

The main issue (resize) seems related to the NavigationView and how it adapts the sizes of its parts depending on the conditions (width and height).

It has some iOS specific code (that would also be used by Catalyst) but I'm not convinced it's the (only) problem (still next thing to try).

The fact that you don't often resize iOS apps (well never but a bit more often for iPadOS apps) is likely why this was not spotted earlier.

The 2nd issue is very likely unrelated (or I missed something) and might to be a transparency issue - where it should not be transparent and overpaint the whole graph.

[ajpinedam]

Hey @ArchieCoder can you please attach/share a sample app or at least the XAML I could use to reproduce this issue? I will be looking into this, following @spouliot findings.

[ArchieCoder]

@ajpinedam I sent my project a while ago to @spouliot. If he is not available, send me your email and I will forward the email.

[spouliot]

@ArchieCoder just back home, I forwarded your email w/attachment to @ajpinedam

[ajpinedam]

Thanks @spouliot :)

[beto-rodriguez]

updates on live charts do not seem to clear previous drawings (unless a redraw is made)

@spouliot On the LiveCharts side, clearing the canvas is something we do depending on the UI framework, some frameworks require it, some frameworks don't.

In the specific case of Uno, all the supported platforms do not require to clear the canvas, but on MacOS it seems that it behaves different, should this be handled in the LiveCharts side?

[spouliot]

should this be handled in the LiveCharts side?

@beto-rodriguez No. The Mac backend should behave identically with the others. If it does not it's a bug :)

I suspect some optimizations are the problem - it's just not common to see the issue so I have not noticed. I'll look harder :D