La aceleración y las animaciones del hardware Chromium hacen que todos los monitores se retrasen en la reproducción de vídeo

Question

He estado experimentando algunos problemas muy, muy extraños con Chromium en Windows 10 y 11. Probé dos navegadores diferentes basados ​​en Chromium (Chrome y Brave) y ambos hacen lo mismo.

Un poco sobre mi configuración: 1 monitor 4K, 1 monitor 1440p, 1 monitor 1080p, Ryzen 3900X, RTX 3070 y 32 GB de RAM. Todos los monitores están configurados al 100% DPI en Windows y también funcionan con resolución nativa con los controladores más recientes de Nvidia.

Cuando un navegador está maximizado en mi monitor de 1080p y se reproduce una animación, como "alguien está escribiendo un comentario" de Facebook o simplemente animaciones CSS normales, la reproducción de vídeo en los monitores de 4K y 1440p comienza a retrasarse por completo, lo que provoca que los vídeos se bloqueen. en algún momento (almacenamiento en búfer infinito). En el momento en que cambio de pestaña o las animaciones en el monitor de 1080p se detiene, el video comienza a reproducirse nuevamente.

Originalmente tuve este problema en Windows 10, pero decidí borrar completamente mi SSD e instalar Windows 11. Instalé Brave y decidí no importar ninguna configuración de Chrome, por lo que fue una instalación predeterminada perfecta. Sin embargo, ocurre exactamente el mismo problema.

Si desactivo la aceleración de hardware en chrome://flags y reinicio los navegadores, funciona perfectamente. La reproducción de vídeo está bien, aunque 4K 60 FPS en YouTube a veces se entrecorta un poco. Si no maximizo el navegador y simplemente se ejecuta en una ventana, también funciona perfectamente.

En este punto sospecho que un par de cosas podrían estar mal:

• Cromo (poco probable ya que nadie más ha informado de este problema que yo sepa)
• Hardware (CPU, GPU, placa base)

Puedo eliminar los controladores defectuosos porque reinstalé Windows y probé un par de controladores Nvidia diferentes. Creo que el hardware real es poco probable, ya que solo tengo problemas al usar Chromium.

Aquí hay una lista de cosas que he probado:

• Cable HDMI diferente
• Puerto diferente en la GPU
• Cambie el monitor por otro monitor de 1080p
• Reinstalar Windows
• Cambiar resoluciones, frecuencia de actualización, etc. de todos los monitores

Para replicar el problema, simplemente tengo que abrir esta página (un cuadrado que gira usando animaciones CSS) en mi monitor de 1080p y reproducir cualquier video de YouTube en otro monitor:https://codepen.io/teerapuch/pen/vLJXeR

Para ver un ejemplo grabado usando mi teléfono (solo para descartar cualquier problema con la PC), aquí hay un enlace:https://www.youtube.com/watch?v=ufsDsV6_HCg

Cuando se reproduce la animación, la reproducción del vídeo se detiene. Cuando cambio a la pestaña de esta publicación (donde no hay animaciones), se reanuda la reproducción del video.

¿Por dónde empiezo a depurar este comportamiento? No hay errores en el Visor de eventos ni en ningún otro lugar donde haya buscado.

Answer 1

Resulta que todo este problema fue un problema del monitor. Todavía no sé por qué y no puedo explicarlo, pero ya se ha solucionado.

Me deshice de mi viejo monitor de 1080p y compré un monitor nuevo de 2560x1440 para reemplazarlo. Ahora todo funciona sin problemas.

Si alguien se encuentra con este problema, hice un script de usuario (TamperMonkey) que básicamente deshabilita todas las animaciones CSS en el navegador. Cada segundo comprueba si hay animaciones nuevas y luego simplemente las elimina. Algunas páginas se ven raras, pero es una buena compensación en comparación con el retraso que experimenté.

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