Cefsharp: V55: WPF Fonts are blurred

[arvindlloyds]

I was using 47.0.3 and now started using V55.

The fonts are blurred after upgrade.

I tried using -
var settings = new CefSharp.CefSettings{ PackLoadingDisabled = false };
settings.CefCommandLineArgs.Add("disable-direct-write", "disable-direct-write");
Cef.Initialize(settings);

and

RenderOptions.ClearTypeHint="Enabled" in XAML.

plus browser.BrowserSettings.OffScreenTransparentBackground = false; in code behind.

but no luck whatsoever. Any help???

Its been introduced in any version after 47.0.3.

Win-7, x64 build, .Net 4.5.2. It works fine in any simple sample app I create but does not work in my DevExpress custom theme containing App.

What version of the product are you using?
Nuget v 55.0.0
What architecture x86 or x64?
x64
On what operating system?
windows 7
Are you using WinForms, WPF or OffScreen?
WPF

[amaitland]

Can you reproduce the problem with https://github.com/cefsharp/CefSharp.MinimalExample

How do you reproduce the problem? Is everything URL affected or just some?

[arvindlloyds]

amazingly the Minimal-App works fine and shows fonts properly.

[amaitland]

Compare your app manifest to the example.

[arvindlloyds]

I had default manifest. Changed the manifest to match CefSharp.MinimalExample.Wpf.

No luck.

it was all fine when I was using 47.0.3.

If I revert to 47.0.3 without changing anything else, it gets fixed.

[amaitland]

Your not providing a whole lot to go on here. How do you reproduce the problem?

If you quickly create a new Wpf project and add a browser, what's the result?

[arvindlloyds]

Hi Alex,

As I mentioned earlier -->"Minimal-App and my simple WPF app works fine and shows fonts properly."

Reproducing the problem at your end cant be possible as I am using multiple packages. Complex most of these is DevExpress controls with custom themes.

I am not sure how you can help except remembering something from top of the head if anything related to fonts etc has changed between 47.0.3 and 55.0.0.

[amaitland]

Double check you have all the relevant resources, there have been quite a few new ones added. Past that you'll have to do your own comparison.

Check the git history for the Minimumexample, might be something tucked away in the descriptions.

Will keep this open though doubt I can help.

[arvindlloyds]

DevExpress custom theme was causing it. its resolved now.

Thank you Alex for all your help.

[xmedeko]

@arvindlloyds I think I have a similar problem. Can you be more specific, what in your custom theme has caused the problem? Thanks.

[arvindlloyds]

@xmedeko Nothing worked then I had to strip off the DevExpress custom theme and created the theme all over again. one step at a time and testing if the step is creating font issue. luckily got rid of the issue. but I couldn't pin point what was creating problem. but it was clearly something in the theme.

[xmedeko]

Got it. The problem is, when the ChromiumWebBrowser is not positioned exactly to a pixel. Just change in the MimimalExample:

<wpf:ChromiumWebBrowser ... Margin="0.5,0.5,0,0">

And the rendered image is blurred. (Got Intel Graphics Card.) The change in the version 55 is caused by the 15b55a41ef (WPF Change to BitmapScalingMode.HighQuality ...). However, with version 53 I got a good image with the NearestNeighbor, when I change to NearestNeighbor in the version 57, I got some text with wrong vertical lines. (What's the problem here?).

The other workaround is to use UseLayoutRounding to one of parent containers. (Depends on the layout which is the right one.) This workaround has been mentioned in #166 too.

[daimenspace]

try this:
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="UseLayoutRounding" Value="True" />

[amaitland]

63.0.0 will switch to UseLayoutRounding = true as the default

[arvindlloyds]

Tried everything, no luck. its happening on Virtual Machine, desktop works fine.

Chrome has the issue but setting disable-direct-write flag resolves the issue. IE is just fine all the time.

[amaitland]

Did you try disabling direct write?

https://github.com/cefsharp/CefSharp/blob/master/CefSharp.Example/CefExample.cs#L96

[arvindlloyds]

yes,
my code -
var settings = new CefSettings { IgnoreCertificateErrors = true };
## settings.CefCommandLineArgs.Add("disable-direct-write", "1");
Cef.Initialize(settings, performDependencyCheck: true, browserProcessHandler: null);

[arvindlloyds]

and XAML, tried with and without Margin="0.5,0.5,0,0", I am on version 57 now-

__

[amaitland]

And your app has a manifest with the relevant compatibility entries?

[arvindlloyds]

I am using CefSharp.MinimalExample.Wpf so assuming that minimal app's manifest is fine. Isnt it?

[amaitland]

Yes. Your virtual machine supports 3d acceleration? You might have to disable the gpu if it doesn't.

I'm out of ideas past that. Sounds more like a WPF problem than a CefSharp specific one to me.

[arvindlloyds]

sadly I have tried with and without GPU
settings.CefCommandLineArgs.Add("disable-gpu", "1");

[amaitland]

Testing with https://github.com/cefsharp/CefSharp.MinimalExample/tree/demo/anycpu in a Hyper V virtual machine running Windows 7 x86 and everything looks fine to me.

VM downloaded from https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

[vibeeshan025]

I think this problem is only for those who have more than 96 dpi scale. My monitor is 120 dpi, I have the issue.

[xmedeko]

@arvindlloyds you must set UseLayoutRounding to some parent container (e.g. Grid, not to the <wpf:ChromiumWebBrowser /> itself.
Also, the Margin="0.5,0.5,0,0" does not fix the problem, it was meant as an example when the bug occurs.

If you place wpf:ChromiumWebBrowser just into a new window without any other elements, no margin, do you see the problem, too?

I've fixed the bug by RenderOptions.BitmapScalingMode="NearestNeighbor". If you do not want this, then run your application under VisualStudio and play with the left and top margins, or try to set UseLayoutRounding on some parent container in the WPF Live Visual Tree and see, if the blur changes. (If you cannot start VS, try WPF Snoop.)

@vibeeshan025 We use the RenderOptions.BitmapScalingMode="NearestNeighbor" and test our app under different DPI and have not spotted any problems (version 57).

[arvindlloyds]

@xmedeko

RenderOptions.BitmapScalingMode="NearestNeighbor"

This works like butter. Thank you so much for all the help.

Font is super smooth now.