☰

Chromium 硬件加速和动画使所有显示器在视频播放时都出现滞后

tag-icon • tag-icon windows google-chrome multiple-monitors chromium video-streaming
Chromium 硬件加速和动画使所有显示器在视频播放时都出现滞后

我在 Windows 10 和 11 上使用 Chromium 时遇到了一些非常非常奇怪的问题。我尝试了两种不同的基于 Chromium 的浏览器（Chrome 和 Brave），它们都出现了同样的问题。

我的配置如下：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。我安装了 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 显示器来替换它。现在一切都运行顺利。

如果有人碰巧遇到这个问题，我为自己制作了一个用户脚本（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);

相关内容