Scaling for Mac Catalyst

[mike3sullivan]

Description

The current MAUI product seems to use the iPad Idiom in Xcode which causes the product to display at 77% size so that designs made for iPad will display more like Mac applications. That may be good if you are pulling a mobile product to the desktop, but if you are designing a desktop application, especially one that is also Windows-based, the scaling becomes a problem -- what is sized properly on Windows looks small on the Mac.

I am not sure if this would be considered a bug or a feature request, but since MAUI is intended for both mobile and desktop development, I would think the MacOS implementation should use a similar scaling to what appears in Windows, or at least provide the ability to choose.

ref: https://developer.apple.com/design/human-interface-guidelines/technologies/mac-catalyst/mac-idiom "Specifically, iOS views and text scale down to 77% in macOS when you use the iPad idiom. When you adopt the Mac idiom to further optimize your Mac app, iOS views render at 100% of their size, and text and graphics appear more detailed."

Steps to Reproduce

Take any project, build on both Windows and MacOS and compare to other desktop applications.

On Mac:

On Windows:

Link to public reproduction project repository

https://github.com/mike3sullivan/MauiSizeConcern

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows, macOS

Affected platform versions

MacOS Monterey 12.6; Windows 10

Did you find any workaround?

https://github.com/dotnet/maui/issues/10622#issuecomment-1275576106

Relevant log output

No response

[drasticactions]

https://github.com/xamarin/xamarin-macios/issues/14621

You can set the scaling yourself by updating your info.plist and setting the UIDeviceFamily to 6, which sets Mac Catalyst to use the Desktop controls.

Note that it could cause other issues with the defaults used by MAUI for things like buttons and stuff. You might need to change the default template XAML provided by MAUI for it to work right.

[ghost]

Hi @mike3sullivan. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[mike3sullivan]

This is a good solution, thank you. Some documentation around its use would be a good thing -- the effect on buttons is obvious, but I don't know what '...and stuff' includes or how it might affect an obscure combination of controls in a large application. i.e. I don't know what to look for.

[drasticactions]

This is a good solution, thank you. Some documentation around its use would be a good thing -- the effect on buttons is obvious, but I don't know what '...and stuff' includes or how it might affect an obscure combination of controls in a large application. i.e. I don't know what to look for.

I don't either, that's why I said that, lol. It's very much unsupported territory, unless the MAUI team wants to define if it could be usable here.

It's not a "supported" idea within MAUI (The UI Framework) AFAIK, it's only a support function of the .NET Mac Bindings, which don't have documentation beyond what was written for Xamarin.Mac previously, before it moved to .NET 6 and as a workload.

[PureWeen]

@davidbritch is there some additional documentation we can add around this?

[pvoelker]

When I use ' UIDeviceFamily = 6', the UI is messed up.

Correct UI with UIDeviceFamily = [2, 3]:

Incorrect UI with UIDevice Family = 6:

Anyone else see this? The Maui manifest version I am on is: 6.0.541/6.0.400

Update, I just noticed this: https://github.com/dotnet/maui/issues/10622#issuecomment-1275576106

[drasticactions]

@pvoelker Because MAUI wasn't built with that UIDeviceFamily in mind, it was built with iOS/iPad OS. When you set that device type, the buttons match the buttons on MacOS.

That's why I wrote that your results will vary when setting it. It's supported in the Xamarin iOS/Mac SDK, but not necessarily for MAUI (The UI Framework).

[pvoelker]

To get around this issue for now. Does anyone know if it is possible to add custom 'named' font sizes? Or override the existing names font sizes? Then maybe 'inflate' the sizes for the 'mac catalyst' target? I was looking into this but did see a way...

[mike3sullivan]

Update: Setting the UIDeviceFamily to 6 is NOT a good solution -- selecting a Picker control seems to cause an application crash on Mac.

[UIView(UICatalystMacIdiomUnsupported_Internal) _throwForUnsupportednonMacIdiomBehaviorWithReason: ] + 0

[falkoschumann]

I solve this problem with NamedSize as font size of controls. But the enum is deprecated, so it is not a permanent solution.

[petervaradi]

This is a very frustrating bug/lack of feature. The only thing I could come up with is to add style reference to every single control, and have separate style files for mac and windows. Switch between the two with #if WINDOWS when the app starts. Still it’s a lot of work.

[mootah01]

Desktop support on the Mac is rubbish. Feels like desktop is a second class citizen (so either needs fixed, or Microsoft need to stop pretending) ContentView… huge memory leak and the group headers don’t refresh properly, so switch to ListView… random list items don’t render. To top it all, your desktop app looks like a bad mobile port due to the iPad scaling mentioned here. I’ve managed to release my fist product using MAUI, but more and more I’m thinking I should have used a different technology.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 3.0 and VSM 17.6 (build 1575)(net8). Can repro on macOS and windows platform with sample project. MauiSizeConcern-main.zip

[mootah01]

If the following documentation is telling people they can use the Mac Desktop idiom : https://learn.microsoft.com/en-us/dotnet/maui/mac-catalyst/user-interface-idiom .. then surely the basic controls should work. Adding a Slider or Picker to the UI results in the app crashing with the error "_throwForUnsupportedNonMacIdiomBehaviorWithReason" when UIDeviceFamily=6 Is the expectation to fix the controls, or to stop saying the UIDeviceFamily=6 is supported?

[supertr0n]

Every time I fall for the Microsoft marketing that MAUI is ready for prime time for desktop Mac applications, and I try it out again, I come across such obvious problems like this within minutes. It's embarrassing that this is still an issue 15 months after being reported. (I too first saw this problem a year ago when I last tried out (and gave up on) MAUI).

Workarounds or not, it's a terrible "out of box" experience to setup a fresh MAUI Blazor Hybrid app in 2024 and have the UI scaled completely incorrectly due to a long known about issue.

It degrades confidence when there is such a huge gap between the publicly touted capabilities of a new Microsoft framework like this and the real experience on the ground.

MAUI has been completely lacking basic features for Mac apps for a very long time. I revisit it every 6-12 months to see if things have improved. Eventually people will just give up, and the chance for MAUI to gain traction will be lost.

Sorry to be a bit negative but at this point I've wasted a lot of time trying to get MAUI to live up to expectations that are being (IMHO) incorrectly set by Microsoft - and each time I get more and more frustrated with it.

And to be clear, this is far more about completely incorrect expectations being set than a lack of willingness to give an early open source project time to mature.

Back to Electron. Again.

[scottkuhl]

Workarounds or not, it's a terrible "out of box" experience to setup a fresh MAUI Blazor Hybrid app in 2024 and have the UI scaled completely incorrectly due to a long known about issue.

I agree, this is a big issue with MAUI on Mac. First impressions matter and you should not be running into this stuff almost immediately after starting a new project.

The Blazor Hybrid template has this issue right out of the box. I guess there is an argument that you might not notice unless you compare it side by side with either a new Blazor project or by running the MAUI project on Windows. But when I first ran it, having seen enough Blazor projects, I knew right away something was off.

[scottkuhl]

The workaround already mentioned by setting the UIDeviceFamily to 6 is probably the best solution, but only if your entire app is going to be in Blazor Hybrid.

Here is an alternative fix that solves the problem from within the web control. Add this script to the index.html page and it will scale the viewport back up on a Mac.

<script>
    if (window.navigator.userAgent.indexOf("Macintosh") != -1) {
        var viewportmeta = document.querySelector('meta[name="viewport"]');
        if (viewportmeta) {
            viewportmeta.content = "width=device-width, initial-scale=1.2, maximum-scale=1.2, user-scalable=no, viewport-fit=cover";
        }
    }
</script>