
У меня возникли очень, очень странные проблемы с 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);