CefSharpで黒い余白が発生し、内部の位置がズレてしまう問題の解決方法

2019年12月15日

以下の記事を作っている時に、想定していない不具合があった。
仕事では発生していなかったため、たぶんディスプレイの問題か、選択したプロジェクトが影響しているかと推測した。
ただ、chromeでページを開いてみると正常に表示されているので、選択したプロジェクトが影響という推測は正しくないと判断した。
っで、残るはディスプレイの設定かなと判断して調べていくことにした。

事象

ページの左部と上部に黒い余白が発生した。
しかも、マウスをボタンやリンクにもっていっても、クリックできない状態でした。要は、位置がずれている状態でした。

解決方法

Cef.EnableHighDPISupport()Cef.Initialize()の前に記述すると解消されるとググった結果わかった。

コードでいうと、解消前のコードがこれ

using CefSharp;
using CefSharp.WinForms;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace CefSharpCallFromJavaScript
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeChromium();
        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            Cef.Shutdown();
        }

        private ChromiumWebBrowser _browser;

        public void InitializeChromium()
        {
            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            CefSettings settings = new CefSettings();
            // Initialize cef with the provided settings
            Cef.Initialize(settings);
            // Create a browser component
            _browser = new ChromiumWebBrowser("https://localhost:44315/");
            // Add it to the form and fill it to the form window.
            Controls.Add(_browser);
            _browser.Dock = DockStyle.Fill;
        }
    }
}

上記ソースコードのInitializeChromiumメソッドの中で、ChromiumWebBrowserの設定をしている。

修正は、 Cef.EnableHighDPISupport() を入れるだけなので非常に簡単です。一部抜粋したコードが以下

public void InitializeChromium()
        {
            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            CefSettings settings = new CefSettings();
            // これを入れないと黒い余白が発生していまう。
            Cef.EnableHighDPISupport();
            // Initialize cef with the provided settings
            Cef.Initialize(settings);

Cef.EnableHiighDPISupport()とは

名前からしてDPIのサポートをしてくれるんだろうなというのは分かる。
でも一応公式のメソッドの説明を読んでみた。

プロセスの起動中に呼び出して、Windows 7以降でHigh-DPIサポートを有効にします。Windowsの古いバージョンは、DirectWriteをサポートしておらず、GDIフォントが非常にひどくカーニングされているため、DPIを認識しないままにしておく必要があります。

http://cefsharp.github.io/api/67.0.0/html/M_CefSharp_Cef_EnableHighDPISupport.htm

そもそも高DPIとは何?という場合は、こちらを参考にするかググってください。

上記引用を見ると、 Windows 7 以前のOSバージョンの場合は、Cef.EnableHiighDPISupport()を入れることで逆に問題になるかも?
Windows 7 すらサポートが切れるのに、それ以前のOSなんてどこも使ってないだろうと思うだろうけど、業務系で現地端末がVistaとか余裕でまだある。
なので、仮に上記問題が発生したら、OSバージョン取得して、 Cef.EnableHiighDPISupport() を適応するか分岐しないといけないかもしれない。

或いは、.NETのバージョンによっては、WinFormsの高DPIが効いていないこともあるので、その場合は.NETのバージョン次第で処理を入れたりということになるのかもしれない。