☰

Chromium のハードウェア アクセラレーションとアニメーションにより、すべてのモニターでビデオ再生が遅れる

tag-icon • tag-icon windows google-chrome multiple-monitors chromium video-streaming
Chromium のハードウェア アクセラレーションとアニメーションにより、すべてのモニターでビデオ再生が遅れる

Windows 10 および 11 の Chromium で非常に奇妙な問題が発生しています。2 つの異なる Chromium ベースのブラウザー (Chrome と Brave) を試しましたが、どちらも同じ問題が発生します。

私のセットアップについて少し説明します: 4K モニター 1 台、1440p モニター 1 台、1080p モニター 1 台、Ryzen 3900X、RTX 3070、32GB の RAM。すべてのモニターは Windows で 100% DPI に設定されており、最新の Nvidia ドライバーを使用してネイティブ解像度で実行されます。

1080p モニターでブラウザを最大化し、Facebook の「誰かがコメントを入力しています」や通常の CSS アニメーションなどのアニメーションを再生すると、4K および 1440p モニターでのビデオ再生が完全に遅れ始め、ある時点でビデオが停止します (無限バッファリング)。タブを切り替えたり、1080p モニターのアニメーションが停止したりするとすぐに、ビデオの再生が再開されます。

もともと Windows 10 でこの問題が発生していましたが、SSD を完全に消去して Windows 11 をインストールすることにしました。Brave をインストールし、Chrome から設定をインポートしないことにしたので、完全なデフォルト インストールでした。しかし、まったく同じ問題が発生します。

chrome://flags でハードウェア アクセラレーションをオフにしてブラウザーを再起動すると、問題なく動作します。ビデオの再生は問題ありませんが、YouTube の 4K 60 FPS は時々途切れます。ブラウザーを最大化せずにウィンドウ内で実行すると、同様に問題なく動作します。

この時点で、いくつかの点が間違っている可能性があると疑っています。

  • Chromium (私の知る限り、この問題は誰も報告していないので、可能性は低い)
  • ハードウェア（CPU、GPU、マザーボード）

Windows を再インストールし、いくつかの異なる Nvidia ドライバーを試したので、不良ドライバーを排除できます。問題は Chromium の使用時にのみ発生するため、実際のハードウェアが原因ではないと思います。

私が試したことのリストは次のとおりです:

  • 別のHDMIケーブル
  • GPUの異なるポート
  • モニターを別の1080pモニターと交換する
  • Windowsを再インストールする
  • すべてのモニターの解像度、リフレッシュレートなどを変更する

この問題を再現するには、1080p モニターでこのページ (CSS アニメーションを使用して回転する四角形) を開き、別のモニターで任意の YouTube ビデオを再生するだけです。https://codepen.io/teerapuch/pen/vLJXeR

私の携帯電話を使用して録画した例を見るには（PC の問題を排除するため）、次のリンクを参照してください。https://www.youtube.com/watch?v=ufsDsV6_HCg

アニメーションの再生中は、ビデオの再生が停止します。この投稿のタブ（アニメーションがないタブ）に切り替えると、ビデオの再生が再開されます。

この動作をデバッグするにはどこから始めればよいのでしょうか? イベント ビューアーにも、私が調べた他の場所にもエラーはありません。

答え1

結局、この問題はすべてモニターの問題だったことが判明しました。原因はまだわかりませんし、説明もできませんが、現在は修正されています。

古い 1080p モニターを捨てて、新しい 2560x1440 モニターに買い替えました。今ではすべてがスムーズに動作します。

この問題に遭遇した人のために、私はブラウザで基本的にすべての CSS アニメーションを無効にするユーザー スクリプト (TamperMonkey) を作成しました。1 秒ごとに新しいアニメーションがあるかどうかを確認し、アニメーションがある場合は削除します。一部のページは見栄えが悪くなりますが、私が経験した遅延に比べれば、それは良いトレードオフです。

// ==UserScript==
// @name         Disable all animations
// @version      1.0
// @author       mortenmoulder
// @include      *
// @grant        GM_addStyle
// @grant        GM_addElement
// ==/UserScript==

//remove animations globally
GM_addStyle("* { animation-duration: 0s !important; animation-play-state: paused; }");

var ignoreElements = [];

//remove animations inside shadow DOM elements
function findShadowRoots(elements) {
    for (var i = 0; i < elements.length; i++) {
        if(elements[i].shadowRoot) {

            if(ignoreElements.includes(elements[i].shadowRoot) == false) {
                GM_addElement(elements[i].shadowRoot, 'style', { textContent: '* { animation-duration: 0s !important; animation-play-state: paused;' });
                ignoreElements.push(elements[i].shadowRoot);
            }

            findShadowRoots(elements[i].shadowRoot.querySelectorAll("*"));
        }
    }
}

//remove animations every 1 second
setInterval(() => {
    var allNodes = document.querySelectorAll('*');
    findShadowRoots(allNodes);
}, 1000);

関連情報