Chromium hardware acceleration and animations makes all monitors lag in video playback

Question

I have been experiencing some very, very odd issues with Chromium on Windows 10 and 11. I tried two different Chromium based browsers (Chrome and Brave), and they both do the same.

A little about my setup: 1x 4K monitor, 1x 1440p monitor, 1x 1080p monitor, Ryzen 3900X, RTX 3070, and 32GB of RAM. All monitors are set to 100% DPI in Windows and they run at native resolution with latest Nvidia drivers as well.

When a browser is maximized on my 1080p monitor and an animation is playing, such as Facebook's "someone is typing a comment" or just regular CSS animations, video playback on the 4K and 1440p monitors start to lag completely, resulting in the videos going stuck at some point (infinite buffering). The very second I switch tabs or the animations on the 1080p monitor stops, the video starts playing again.

I originally had this problem in Windows 10, but I decided to completely wipe my SSD and install Windows 11. I installed Brave and decided not to import any settings from Chrome, so it was a perfect default installation. However, the exact same problem happens.

If I turn off hardware acceleration in chrome://flags and restart the browsers, it works flawlessly. Video playback is fine, although 4K 60 FPS on YouTube is a bit choppy at times. If I don't maximize the browser and it just runs in a window, it works flawlessly as well.

At this point I'm suspecting a couple of things could be wrong:

• Chromium (unlikely as nobody else has reported this problem afaik)
• Hardware (CPU, GPU, motherboard)

I can eliminate bad drivers because I reinstalled Windows, as well as tried a couple of different Nvidia drivers. I think actual hardware is unlikely, as I only experience issues using Chromium.

Here's a list of things I have tried:

• Different HDMI cable
• Different port on the GPU
• Swap the monitor with another 1080p monitor
• Reinstall Windows
• Change resolutions, refresh rate, etc. of all monitors

To replicate the problem, I simply have to open this page (a square spinning using CSS animations) on my 1080p monitor and play any YouTube video on another monitor: https://codepen.io/teerapuch/pen/vLJXeR

To see a recorded example using my phone (just to rule out any PC issues), here's a link: https://www.youtube.com/watch?v=ufsDsV6_HCg

When the animation is playing, the video playback stops. When I switch to this post's tab (where there are no animations), it resumes the video playback.

Where do I even begin to debug this behavior? There are no errors in the Event Viewer or anywhere else I've looked.

Answer 1

So it turns out this entire issue was a monitor issue. I still do not know why, and I cannot explain why, but it has now been fixed.

I ditched my old 1080p monitor and bought a brand new 2560x1440 monitor to replace it. Now everything runs smoothly.

If anyone happens to run into this issue, I made myself an userscript (TamperMonkey) that basically disables all CSS animations in the browser. Every 1 second it checks if there are any new animations and then just kills them. Some pages look funky, but that's a good trade-off compared to the lag I experienced.

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