Аппаратное ускорение и анимация Chromium приводят к задержкам при воспроизведении видео на всех мониторах

Аппаратное ускорение и анимация Chromium приводят к задержкам при воспроизведении видео на всех мониторах

У меня возникли очень, очень странные проблемы с Chromium на Windows 10 и 11. Я попробовал два разных браузера на базе Chromium (Chrome и Brave), и оба они ведут себя одинаково.

Немного о моей настройке: 1x 4K монитор, 1x 1440p монитор, 1x 1080p монитор, Ryzen 3900X, RTX 3070 и 32 ГБ ОЗУ. Все мониторы настроены на 100% DPI в Windows и работают в родном разрешении с последними драйверами Nvidia.

Когда браузер развернут на моем мониторе 1080p и воспроизводится анимация, например, «кто-то печатает комментарий» на Facebook или просто обычная CSS-анимация, воспроизведение видео на мониторах 4K и 1440p начинает полностью отставать, в результате чего видео зависает в какой-то момент (бесконечная буферизация). В ту же секунду, как я переключаю вкладки или анимация на мониторе 1080p останавливается, видео снова начинает воспроизводиться.

Изначально у меня была эта проблема в Windows 10, но я решил полностью очистить свой SSD и установить Windows 11. Я установил Brave и решил не импортировать настройки из Chrome, так что это была идеальная установка по умолчанию. Однако возникла та же самая проблема.

Если я отключу аппаратное ускорение в chrome://flags и перезапущу браузеры, то все будет работать безупречно. Видео воспроизводится нормально, хотя 4K 60 FPS на YouTube иногда немного прерывается. Если я не разверну браузер на весь экран и он просто запустится в окне, то все будет работать также безупречно.

На данный момент я подозреваю, что есть несколько вещей, которые могут быть неверны:

  • Chromium (маловероятно, так как никто другой не сообщал об этой проблеме, насколько мне известно)
  • Аппаратное обеспечение (ЦП, ГП, материнская плата)

Я могу исключить плохие драйверы, потому что я переустановил Windows, а также попробовал несколько разных драйверов Nvidia. Я думаю, что фактическое оборудование вряд ли, так как я испытываю проблемы только при использовании Chromium.

Вот список того, что я попробовал:

  • Другой кабель HDMI
  • Другой порт на GPU
  • Замените монитор на другой монитор 1080p
  • Переустановить Windows
  • Изменить разрешение, частоту обновления и т. д. всех мониторов.

Чтобы воспроизвести проблему, мне просто нужно открыть эту страницу (вращающийся квадрат с использованием CSS-анимации) на моем мониторе 1080p и воспроизвести любое видео YouTube на другом мониторе:https://codepen.io/teerapuch/pen/vLJXeR

Чтобы увидеть записанный пример с использованием моего телефона (просто чтобы исключить любые проблемы с ПК), вот ссылка:https://www.youtube.com/watch?v=ufsDsV6_HCg

Когда анимация проигрывается, воспроизведение видео останавливается. Когда я переключаюсь на вкладку этого поста (где нет анимации), он возобновляет воспроизведение видео.

Где мне вообще начать отлаживать это поведение? В Event Viewer или где-либо еще, куда я смотрел, нет никаких ошибок.

решение1

Так что, оказывается, вся эта проблема была связана с монитором. Я до сих пор не знаю, почему, и не могу объяснить, почему, но теперь это исправлено.

Я выбросил свой старый монитор 1080p и купил ему на замену совершенно новый монитор 2560x1440. Теперь все работает гладко.

Если кто-то столкнется с этой проблемой, я сделал себе пользовательский скрипт (TamperMonkey), который по сути отключает все CSS-анимации в браузере. Каждую секунду он проверяет, есть ли новые анимации, а затем просто убивает их. Некоторые страницы выглядят странно, но это хороший компромисс по сравнению с задержкой, которую я испытал.

// ==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);

Связанный контент