none
C# WebBrowserコントロールの表示について RRS feed

  • 質問

  • C#のwebBrowserコンポーネントについての質問です。

    独自に作成したHTMLファイル(*1)を
    独自に作成したアプリケーション(*2)と
    Internet Explorer(ver 11)に表示し比較すると
    独自アプリの表示に「ちらつき」が多く、かつ 動きがカクカクしているように見えます。

    独自に作成したアプリケーションの表示クオリティーがInternet Explorerと同じと
    なるような設定方法などご存知の方がおられましたらご教示いただけると幸いです。

    <補足>
    ・OS:Windows 7 Professional(64bit) Service Pack 1
    ・開発環境:Microsoft Visual Studio 2010 (.NET Framework 4 Client Profile)
    ・アプリ、IE,Webコンテンツ(HTMLファイル)は同じPC内に存在しており、Webコンテンツ(HTMLファイル)は直接パス指定で読み込んでいます。

    *1)
     ・HTMLで記述。
     ・HTMLタグのmarquee と スタイルシートのanimation を使い横方向に文字が流れるようなコンテンツとなっています。
     ・検証用にHTMLファイルを末尾に記述させて頂きますのでコピペでファイル化してください。
      尚、当該HTMLをC#のwebBrowserコンポーネントを組み込んだアプリケーションで表示させるには
      レジストリーにアプリケーションのレンダリングモードを追加する必要があります。
      追加するキーは以下の2点です。

    その1
     キー:HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
     名称:アプリケーションのファイル名(***.exe)
     種類:DWORD(32bit)値
     値:11000(10進数)

    その2
     キー名:HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_DOCUMENT_COMPATIBLE_MODE
     名前:アプリケーションのファイル名(***.exe)
     種類:DWORD(32bit)値
     値:110000(10進数)

    *2) 
     ・Formを1つ持ち、そのフォームにwebBrowserコントロールを張り付けたもの。
     ・OnLoad イベントにて webbrowser1.Navigate で ハードディスク上にあるHTMLファイルをパス指定で直接呼び出しています。

    以上、よろしくお願いいたします。

    ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    ■検証用HTMLファイル:ScrollText.html
    ■ 以下をコピペでファイル化して下さい。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
    html, body, div, span, object, iframe,table, caption, tbody, tfoot, thead, tr, th, td,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,time, mark, audio, video
    {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }

    body {
    line-height:1;
    }

    article, aside, dialog, figure, footer, header,hgroup, nav, section
    {
    display:block;
    }

    nav ul {
    list-style:none;
    }

    blockquote, q {
    quotes:none;
    }

    blockquote:before, blockquote:after,q:before, q:after
    {
    content: '';
    content: none;
    }

    a
    {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }

    table
    {
    border-collapse:collapse;
    border-spacing:0;
    }

    hr
    {
        display:block;
        height:1px;
        border:0;
        border-
        margin:1em 0;
        padding:0;
    }

    input, select {
    vertical-align:middle;
    }

    html, body
    {
    height:100%;
    }

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;

    }

    .clearfix {
    display: inline-block;
    }

    * html .clearfix
    {
    height: 1%;
    }

    .clearfix
    {
    display:block;
    }

    .ScroolText
    {
    "white-space:pre;"> hidden;
    "white-space:pre;"> relative;
    color: #000000;
    font-weight: bold;
    font-family: "MS Pゴシック";
    font-size: 100px;
    background: #FFFFFF;
    padding: 10px 10px;
    }

    .ScroolText:after
    {
        content: ' ';
        display: block;
        "white-space:pre;"> absolute;
        "white-space:pre;"> 0;
        right: 0;
        bottom: 0;
        "white-space:pre;"> 0;
        "white-space:pre;"> 10;
    }

    .ScroolText span
    {
    display: inline-block;
    white-space: nowrap;
    padding-"white-space:pre;"> 100%;

    -webkit-animation-name: marquee;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 70s;

    -moz-animation-name: marquee;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 70s;

    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-duration: 70s;

    }

    @-webkit-keyframes marquee {
      from   { -webkit-transform: translate(0%);}
      99%,to { -webkit-transform: translate(-100%);}
    }

    @-moz-keyframes marquee {
      from   { -moz-transform: translate(0%);}
      99%,to { -moz-transform: translate(-100%);}
    }

    @keyframes marquee {
      from   { transform: translate(0%);}
      99%,to { transform: translate(-100%);}
    }
    </style>

    </head>
    <body>
    <p class="ScroolText">
    <span>
    <font color="#000000">
    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろわうぃううぇをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろわうぃううぇをん
    </font>
    </span>
    </p>
    </body>
    </html>
    2017年9月12日 5:45

すべての返信

  • 描画がカクカクする現象ですが、GPU レンダリングを ON にしてみてはいかがでしょうか?

    GPU レンダリングを ON にするには下記のレジストリのキーを追加します。

    HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_GPU_RENDERING

    値の名前: exeのファイル名
    値のタイプ: REG_DWORD
    値のデータ: 1


    参考サイト:  https://msdn.microsoft.com/en-us/library/ee330731(v=vs.85).aspx#gpu_rendering
    2017年9月12日 5:56
  • ↓ 前のスレッドの話の続きですか?

    C# WebBrowserコントロールのGPUレンダリングについて
    https://social.msdn.microsoft.com/Forums/ja-JP/1006a1ab-b5a1-4341-87fc-56d996a062cc/c-webbrowsergpu?forum=netfxgeneralja

    結局どうなったのでしょうか? 未解決だとすると前のスレッドの話から始める必要がありそうな気がしますが・・・

    ご自分が立てたスレッドは、クロースするまできちんとフォローお願いします。放置はマナー違反だと自分は思います。

    2017年9月12日 6:45
  • kenjinote様

    早速、ご回答いただきありがとうございます。
    ご教示いただきました内容でレジストリーを変更してみましたが変化はありませんでした。

    2017年9月12日 7:21
  • SurferOnWww様

    早速、ご回答いただきありがとうございます。
    先般はGPUレンダリングでの質問に対しご回答いただきありがとうございました。
    GPUレンダリングの件はまだ確認がとれておらず保留状態です。
    時期を見て再度確認をしますのでお待ちいただけると幸いです。

    >結局どうなったのでしょうか? 未解決だとすると前のスレッドの話から始める必要がありそうな気がしますが・・・
    >ご自分が立てたスレッドは、クロースするまできちんとフォローお願いします。放置はマナー違反だと自分は思います。
    ご指摘の件はその通りだと思います。
    しかし、本件のコンテンツはHTMLタグのmarquee と スタイルシートのanimation を組み合わせで表示しているものであり「GPUレンダリング」とは別問題だと考えスレッドを立てさせて頂きました。

    2017年9月12日 7:25
  • > しかし、本件のコンテンツはHTMLタグのmarquee と スタイルシートのanimation を組み合わせで表示しているものであり「GPUレンダリング」とは別問題だと考えスレッドを立てさせて頂きました。

    前のスレッドでは、私を含めた 3 人の回答者と質問者さんの PC、WebBrowser アプリで結果に違いがみられたということから、質問者さんの環境固有の問題が疑わしい状況だったはずです。

    なので、今回の問題も「別問題」ではなくて、質問者さんの環境固有の問題という可能性は排除できないのでは?

    「別問題」と言える根拠は何でしょう?

    2017年9月12日 8:14

  • SurferOnWww様

    親身に回答をして頂き本当に感謝いたします。

    >「別問題」と言える根拠は何でしょう?

    同じ事象と考える理由も特に思いつかなかったので皆様のお知恵を拝借し
    早期の問題解決の手掛かりとなる情報が得られればとの
    軽率な考えでスレッドを立てさせて頂きました。
    ご不快な思いをさせてしまい失礼いたしました。
    無知ゆえの不躾をお許し下さい。

    誠に恐縮ですが今回スレッドを立てた経緯を説明させて頂きますと
    「GPUレンダリング」の件とは別のPC2台で今回の事象が発生しました。
    そこで、ご指摘の「質問者さんの環境固有の問題が疑わしい状況」とは違うのでは?
    と考えスレッドを立てさせていただいた次第であります。

    以下に事象の発生したPCのスペックを記述させて頂きます。
    PC①
    OS: Windows8.1(64ビット)
    CPU: Intel(R) Core(TM)i5-4200U CPU @1.60GHz 2.30GHz
    メモリ: 10GB
    GPU: Intel(R) HD Graphics Family
    メーカー: FUJITSU
    型式: FMVWMS257
    ストレージ: HDD

    PC②
    OS: Windows10 Pro(64ビット)
    CPU: Intel(R) Core(TM) m5-6Y57 CPU @1.10GHz 1.51GHz
    メモリ: 4GHz
    GPU: Intel(R) HD Graphics 515
    メーカー: Panasonic
    型式: CF-20
    ストレージ: SSD

    ■1点気になる点がありまして、こちらの開発環境はVC2010でアプリを作っておりますが
     SurferOnWww様の開発環境のバージョンを教えて頂けると幸いです。

    バージョンによってはwebBrowserやレンダリングエンジンの制御方法に
    違いがあるのではないかと思い質問させて頂きました。

    以上、よろしくお願いいたします。
    2017年9月13日 2:25
  • > SurferOnWww様の開発環境のバージョンを教えて頂けると幸いです。

    質問者さんの前のスレッドで書きました。

    レスを読んでないように思えます。読んでないとすると、そういうところも問題だと思うのですが・・・

    2017年9月13日 3:12
  • SurferOnWww様

    >レスを読んでないように思えます。読んでないとすると、そういうところも問題だと思うのですが・・・

    仰るとおり通りです。大変失礼いたしました。

    >自分も、以下のスペックの PC で、Visual Studio 2010 Professional のデフォルト設定>(x86、.NET 4 Client Profile で Debug ビルド)で作った WebBrowser アプリで試してみました。

    過去のログより確認しました。お手数おかけしました。


    2017年9月13日 6:51
  • 前のスレッドの問題は、IE11 の詳細設定で「GPU レンダリングではなく、ソフトウェアレンダリングを使用する」という設定になっていたため、その設定が優先され、WebBrowser アプリを使ってレジストリの FEATURE_GPU_RENDERING を設定しても効果がなかったということのようですね。

    であれば、

    (1) 先のスレッドの問題は解決したようですのでクローズしてください。

    (2) kenjinote さんの提案を試したのは「GPU レンダリングではなく、ソフトウェアレンダリングを使用する」状態だったと思いますが、そうであれば GPU レンダリングを有効にしてもう一度試し、結果を書いてください。

    上記 (2) で解決しなかった場合は、最初の質問にアップされているコードを見なおして、問題を再現できる必要最低限まで削ってください。

    > HTMLタグのmarquee と スタイルシートのanimation を使い

    とのことですが、使っているのは CCS3 の animation だけのようです。多分どこかにあったものをコピペしているのだと思いますが、その内容を理解しているでしょうか?

    理解してないと話が通じにくいです。理解するためにも今のコードが何をしているか理解して、不要な部分(多々あります)を削ってください。

    2017年9月13日 10:06
  • SurferOnWww様

    大変お世話になっております。

    >(2) kenjinote さんの提案を試したのは「GPU レンダリングではなく、
    >ソフトウェアレンダリングを使用する」状態だったと思いますが、
    >そうであれば GPU レンダリングを有効にしてもう一度試し、結果を書いてください。
    【確認方法】
      本スレッドに記載させていただいたHTMLファイルをIEとアプリにて表示させ、
      レンダリングモードを[GPU]と[ソフトウエア]に切り替えて表示した場合の表示状況を確認しました。
    【結果】
      ・IE
        GPU とソフトウエア では違いが発生しました。GPUのほうがスムーズに表示されています。

      ・アプリ
        IE と 同じ結果となりました。

      ・IE と アプリを比較
        GPUレンダリングモードにした場合でも、アプリはIEに比べ「ちらちら」、「カクカク」なっています。

    ※定量的に表現できず申し訳ありません。

    >上記 (2) で解決しなかった場合は、最初の質問にアップされているコードを見なおして、
    >問題を再現できる必要最低限まで削ってください。
     上記結果の通り、再現する状態となっております。

    >とのことですが、使っているのは CCS3 の animation だけのようです。
    >多分どこかにあったものをコピペしているのだと思いますが、
    >その内容を理解しているでしょうか?
    >理解してないと話が通じにくいです。理解するためにも今のコードが何をしているか理解して、
    >不要な部分(多々あります)を削ってください。
     誠に恐縮なのですが、同じHTMLファイルを表示した2つのソフトウエアに違いが生じていて、
     その違いを無くす方法がないのか調べております。
     IEもC#のwebbrowserも同じHTMLレンダリングエンジン(Trident)を搭載していると思うので
     HTMLファイルの良し悪しにかかわらず表示のクオリティーは同じになるのでは?との考えです。
     大変申し訳ないのですがHTMLファイルの見直し以外でアドバイスを頂けますと大変助かります。

    以上、よろしくお願いいたします。

    2017年9月14日 1:36
  • >>上記 (2) で解決しなかった場合は、最初の質問にアップされているコードを見なおして、
    >>問題を再現できる必要最低限まで削ってください。

    >  上記結果の通り、再現する状態となっております。

    質問にアップされたコードをそのままコピペするなりして試してくれと言ってます?

    再現できれば良いというものではないですよ。それは赤の他人にコードを丸投げしてデバッグしてくれと言っているようなものだと思います。

    今の状態ですと、回答者の方で関係なさそうなコードを削除していって問題を起こしている部分を特定していくという、本来は質問者さんがやるべきことをしなければなりません。

    さらに、アップされた CSS は、失礼を承知で言わせていただければ、イイカゲン、テキトー、メチャクチャで、少なくとも自分は見る気力がわいてきません。

    なので、質問者さんはコードを見なおす気がなく、最初の質問にアップされてコードを見て考えてくれとのご希望なら、自分は撤退させていただきます。

    お役に立てずすみませんが、他の方の回答をお待ちください。

    2017年9月14日 5:37
  • SurferOnWww様

    大変お世話になっております。

    >お役に立てずすみませんが、他の方の回答をお待ちください。
     とんでもないことでございます。
     貴重なお時間を割いていただき、ありがとうございました。

    2017年9月14日 7:21