Chromium 하드웨어 가속 및 애니메이션으로 인해 비디오 재생 시 모든 모니터가 지연됩니다.

Question

Windows 10 및 11에서 Chromium과 관련하여 매우 이상한 문제가 발생했습니다. 두 가지 Chromium 기반 브라우저(Chrome 및 Brave)를 사용해 보았지만 둘 다 동일했습니다.

내 설정에 대해 간략히 설명하자면 4K 모니터 1개, 1440p 모니터 1개, 1080p 모니터 1개, 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 60FPS가 때때로 약간 고르지 않지만 비디오 재생은 괜찮습니다. 브라우저를 최대화하지 않고 창에서 실행하는 경우에도 완벽하게 작동합니다.

이 시점에서 나는 몇 가지 문제가 있을 수 있다고 의심합니다.

• 크롬(아무도 이 문제를 보고하지 않았을 가능성이 높음)
• 하드웨어(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

애니메이션이 재생되면 비디오 재생이 중지됩니다. 이 게시물의 탭(애니메이션이 없는 곳)으로 전환하면 비디오 재생이 다시 시작됩니다.

이 동작을 디버깅하려면 어디서부터 시작해야 합니까? 이벤트 뷰어나 내가 본 다른 곳에서는 오류가 없습니다.

Answer 1

그래서 이 전체 문제는 모니터 문제인 것으로 밝혀졌습니다. 아직도 이유를 모르겠고 이유를 설명할 수도 없지만 지금은 수정되었습니다.

기존 1080p 모니터를 버리고 새 2560x1440 모니터를 구입하여 교체했습니다. 이제 모든 것이 원활하게 진행됩니다.

누구든지 이 문제가 발생하면 기본적으로 브라우저에서 모든 CSS 애니메이션을 비활성화하는 사용자 스크립트(TamperMonkey)를 직접 만들었습니다. 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);