主页 / computer / 问题 / 1691103
Accepted
MortenMoulder
Asked: 2021-12-04 09:09:00 +0800 CST

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

  • 772

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

关于我的设置：1x 4K 显示器、1x 1440p 显示器、1x 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（不太可能，因为没有其他人报告过这个问题 afaik）
  • 硬件（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

播放动画时，视频播放停止。当我切换到这篇文章的标签（没有动画）时，它会恢复视频播放。

我什至从哪里开始调试这种行为？事件查看器或我查看的其他任何地方都没有错误。

windows google-chrome

1 个回答

  1. Best Answer

    所以事实证明这整个问题是一个监视器问题。我仍然不知道为什么，我无法解释为什么，但现在已经修复了。

    我放弃了旧的 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);
    • 0

相关问题