Does CefSharp support WPF ScaleTransform?

[wlh21cn]

I'm using CefSharp WPF for an application. The application has an ability to scale the whole page, including CefSharp components and other non CefSharp components. We implement it with ScaleTransform. When scale the page, other non CefSharp components works well, the text and lines are fine. While for CefSharp components, the text and lines are blurry.
I'd like to know whether CefSharp support WPF ScaleTransform, is there a solution for it? Thanks in advance.

[amaitland]

Every frame is rendered as a bitmap. Support for ScaleTransform is the default WPF implementation for scaling bitmaps.

https://github.com/cefsharp/CefSharp/blob/cefsharp/89/CefSharp.Wpf/Themes/Generic.xaml#L12
https://docs.microsoft.com/en-us/dotnet/api/system.windows.media.bitmapscalingmode?view=net-5.0

Personally I don't recommend using a ScaleTransform as post processing the bitmap is slow, zooming the browser is preferable (does depend on your use case).

[wlh21cn]

Thank @amaitland for you answer. We use ScaleTransform in my app to zoom the whole page, the page includes CefSharp components and other wpf components. When I zoom the page to 400%, other wpf components work well, while text and lines in CefSharp component are blurry.

For this case, I think the internal implementation for CefSharp may like this. For example, the CefSharp windows size is 300 * 300, when I zoom my page to 400%, the size of CefSharp window is 1200*1200. While the original web container is still 300 * 300 in buffer, and every frame is rendered as a bitmap, even the bitmap scale quality is HighQuality, scaling a bitmap from 300 * 300 to 1200 * 1200 will get a blurry effect. Please correct me if my guess is wrong.

I'd like to know is there a solution to display text and lines clearly when zoom the page to 400%? And is there a way to change the web container size in the buffer? if I change web container size in the buffer to the actual CefSharp window size, I think the text and lines are clear.

Hope you can give me more ideas for my case, thanks!

[amaitland]

the CefSharp windows size is 300 * 300, when I zoom my page to 400%, the size of CefSharp window is 1200*1200. While the original web container is still 300 * 300 in buffer

I've never looked into the specifics of how ScaleTransform works, I think that's correct though you'd be best to do your own research to confirm.

even the bitmap scale quality is HighQuality,

NearestNeighbor might give a better result.

Use nearest-neighbor bitmap scaling, which provides performance benefits over LowQuality mode when the software rasterizer is used. This mode is often used to magnify a bitmap.

As per https://docs.microsoft.com/en-us/dotnet/api/system.windows.media.bitmapscalingmode?view=net-5.0

I'd like to know is there a solution to display text and lines clearly when zoom the page to 400%?

What exactly are you trying to achieve? What do you need to scale by 400% for?

• You can zoom the browser using ChromiumWebBrowser.ZoomLevel.
• You can scale the browser for a specific DPI using ChromiumWebBrowser.NotifyDpiChange

Perhaps you can adapt one of these to meet your requirements.

And is there a way to change the web container size in the buffer? if I change web container size in the buffer to the actual CefSharp window size, I think the text and lines are clear.

Does ScaleTransform allow this?

If you'd like to know more about how the browser works I'd suggest using the debugger.
https://github.com/cefsharp/CefSharp/blob/cefsharp/89/CefSharp.Wpf/ChromiumWebBrowser.cs#L780
https://github.com/cefsharp/CefSharp/blob/cefsharp/89/CefSharp.Wpf/ChromiumWebBrowser.cs#L1927