chromelyapps / Chromely

Build Cross Platform HTML Desktop Apps on .NET using native GUI, HTML5, JavaScript, CSS, Owin, AspNetCore (MVC, RazorPages, Blazor)
MIT License
2.99k stars 279 forks source link

MacOSX - Content clipped when using scaled resolution (HiDPI) #346

Closed GustavoHennig closed 2 years ago

GustavoHennig commented 2 years ago

When scaling is enabled on Mac, content is not shown correctly.

I tried to fix it in the chromely_mac.mm file, but my knowledge of Mac APIs was insufficient. Can you help me or give me a hint on how to fix it?

Below are the examples:

Without scaling:

2021-10-18 20_34_48-macOS 11 1 - VMware Workstation 16 Player (Non-commercial use only)

Scaling enabled:

2021-10-18 20_33_44-macOS 11 1 - VMware Workstation 16 Player (Non-commercial use only)

mattkol commented 2 years ago

@GustavoHennig not that different for me, my knowledge of Objective-C Cocoa is limited too.

I also do not think that CEF supports HIGH DPI for Linux and OSX, which is likely why you see what you see. https://github.com/chromelyapps/Chromely/blob/432fb92074a047c3a2a8619ccccf5a436ed38b33/src/Chromely/CefGlue/CefRuntime.cs#L313

My suggestion is to try simple things first like setting Zoom level (I am just thinking out loud here, not sure if that will help or even related), but since it is easier to do, it is worth trying first.

From @magreenblatt (https://www.magpcss.org/ceforum/viewtopic.php?f=11&t=17865)

You can use CefBrowserHost::SetZoomLevel instead of changing the device scale factor.

These are related links on setting Zoom level:

CEF Forum: https://www.magpcss.org/ceforum/viewtopic.php?f=11&t=17865 https://magpcss.org/ceforum/viewtopic.php?f=6&t=11491&p=34108 https://magpcss.org/ceforum/viewtopic.php?f=6&t=14741

Chromely: https://github.com/chromelyapps/Chromely/issues/270

If all that does not work, then looking closely at Objective-C Cocoa will be next.

GustavoHennig commented 2 years ago

In the image, the menu is cut off and I couldn't make it be displayed, I would need to have two versions of the content for each scale. But I will try to follow your suggestion, I haven't tried it yet. Thanks!!

GustavoHennig commented 2 years ago

For those who have the same problem, that's how I finally solved it:

I tried using ZoomLevel, I also tried changing chromely_mac.mm, I learned how to resize ContentView, Frame and Bounds but it wasn't enough. In the end, I just needed to set the initial Height of the Window to a size smaller than the user's screen. For example, if the screen is 800px (H), I only need to set 600px to the Height. If I set more, the system will automatically resize the window to the max height of the screen, and this causes the ContentView to be cropped (Mac doesn't allow windows that are taller than the screen).

After this, the user can resize the window manually without problems.

It may be a bug, but there is a workaround.

Ex:

config.WindowOptions.Size = new WindowSize(1070, 550);