☰

Chromium 硬體加速和動畫使所有顯示器在視訊播放時出現滯後

tag-icon • tag-icon windows google-chrome multiple-monitors chromium video-streaming
Chromium 硬體加速和動畫使所有顯示器在視訊播放時出現滯後

我在 Windows 10 和 11 上遇到了一些非常非常奇怪的 Chromium 問題。

簡單介紹一下我的設定：1 個 4K 顯示器、1 個 1440p 顯示器、1 個 1080p 顯示器、Ryzen 3900X、RTX 3070 和 32GB RAM。所有顯示器在 Windows 中都設定為 100% DPI，它們也可以使用最新的 Nvidia 驅動程式以本機解析度運作。

當瀏覽器在 1080p 顯示器上最大化並且正在播放動畫（例如 Facebook 的“有人正在輸入評論”或只是常規 CSS 動畫）時，4K 和 1440p 顯示器上的視頻播放開始完全滯後，導致視頻卡住在某個時刻（無限緩衝）。當我切換標籤或 1080p 顯示器上的動畫停止時，影片會再次開始播放。

我最初在 Windows 10 中遇到了這個問題，但我決定完全擦除 SSD 並安裝 Windows 11。然而，完全相同的問題發生了。

如果我關閉 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

要查看使用我的手機錄製的範例（只是為了排除任何電腦問題），請點擊以下連結：https://www.youtube.com/watch?v=ufsDsV6_HCg

當動畫播放時，影片播放停止。當我切換到這篇文章的選項卡（沒有動畫）時，它會恢復影片播放。

我該從哪裡開始調試這種行為？事件檢視器或我查看過的其他任何地方都沒有錯誤。

答案1

所以事實證明整個問題都是顯示器問題。我仍然不知道為什麼，也無法解釋為什麼，但現在已經修復了。

我丟掉了舊的 1080p 顯示器，購買了一台全新的 2560x1440 顯示器來取代它。現在一切都進展順利。

如果有人碰巧遇到這個問題，我為自己製作了一個使用者腳本（TamperMonkey），它基本上禁用了瀏覽器中的所有 CSS 動畫。每隔 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);

相關內容