Why is my Google Chrome extension's popup UI laggy on external monitors but not on my laptop's native screen?

Question

I'm building a chrome extension and it includes a simple popup page that appears when you click on the extension's icon. This popup page consists of some simple HTML, CSS and jQuery code. Nothing fancy.

The JS seems to be running fine but the CSS hover, transition, and animation effects are extremely laggy (up to 5 seconds lag) when I interact with it on an external monitor.

Everything else runs perfectly fine and I can see that the JavaScript is executing as expected. It's just the above mentioned CSS rendering issues.

The funny thing is that if I drag the same browser window to my laptop's native screen, the issue is gone. Everything runs smoothly. Drag the same window over to any of my 2 external monitors and Bam! Lag city...

I've tested on my friend's computer and he has the same problem. Works fine on native screen, laggy on external monitors. So far it appears that the issue only occurs on Macs. Through the process of elimination, I know that the issue is not caused by the monitor itself and has nothing to do with the video input cables. I've only been able to observe this bug on external monitors connected to my Macbook Pro (Early 2015) and my friend's Macbook Pro (Early 2014).

Things I have tried (and didn't help):

• Disabling "hardware acceleration" via Chrome settings
• Restoring Chrome to default settings
• Monitoring system performance (CPU and Memory usage are both well below limits)
• Monitoring Chrome Task Manager (The extension is using minimal memory and no notable CPU usage difference between the laggy and non-laggy tests)
• Toggling a bunch of settings in chrome://flags
• Switching out various cables (HTMI, DVI, and VGA)

Curious to know if anyone else has run into similar issues? This weird external monitor lag issue has been bugging me all week and I'm all out of ideas.

Github repo to demo project -> https://github.com/peachteaboba/chrome_extension_bug_demo

---

------------------------- Update -------------------------

I've pinpointed the source cause of the bug. Apparently if you include a background.js file in the manifest.json then the popup lags. If you do not include a background script then the lag is gone.

manifest.json (laggy version)

{
  "manifest_version": 2,
  "name": "Chrome Extension Bug Demo v2",
  "description": "Chrome Extension Bug Demo v2",
  "version": "2.00",
  "author": "",
  "browser_action": {
    "default_icon": "images/bug.png",
    "default_title": "Chrome Extension Bug Demo v2",
    "default_popup": "popup.html"
  },
  "chrome_url_overrides": {},
  "permissions": [
    "storage",
    "tabs"
  ],
  "background": {
    "scripts": [
      "js/background.js"
    ]
  },
  "web_accessible_resources": [
    "script.js"
  ],
  "externally_connectable": {
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "accept_tls_channel_id": true
  }
}

manifest.json (non-laggy version)

{
  "manifest_version": 2,
  "name": "Chrome Extension Bug Demo v2",
  "description": "Chrome Extension Bug Demo v2",
  "version": "2.00",
  "author": "",
  "browser_action": {
    "default_icon": "images/bug.png",
    "default_title": "Chrome Extension Bug Demo v2",
    "default_popup": "popup.html"
  },
  "chrome_url_overrides": {},
  "permissions": [
    "storage",
    "tabs"
  ],
  "background": {
    "scripts": [
    
    ]
  },
  "web_accessible_resources": [
    "script.js"
  ],
  "externally_connectable": {
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "accept_tls_channel_id": true
  }
}

The only change made was removing "js/background.js" from the background scrips section. The actual background.js file is empty, so even including this empty script will trigger the Chrome bug.

There is a Chromium bug ticket open for this issue. You can view that via this link: https://bugs.chromium.org/p/chromium/issues/detail?id=971701

Answer 1

We faced this issue in production for our Chrome Extension at usebubbles.com and worked around it by forcing the popup to repaint while opened on a secondary monitor on MacOS.

Simply add the following to the top of a javascript file included from your popup.html:

/**
 * Temporary workaround for secondary monitors on MacOS where redraws don't happen
 * @See https://bugs.chromium.org/p/chromium/issues/detail?id=971701
 */
if (
  // From testing the following conditions seem to indicate that the popup was opened on a secondary monitor
  window.screenLeft < 0 ||
  window.screenTop < 0 ||
  window.screenLeft > window.screen.width ||
  window.screenTop > window.screen.height
) {
  chrome.runtime.getPlatformInfo(function (info) {
    if (info.os === 'mac') {
      const fontFaceSheet = new CSSStyleSheet()
      fontFaceSheet.insertRule(`
        @keyframes redraw {
          0% {
            opacity: 1;
          }
          100% {
            opacity: .99;
          }
        }
      `)
      fontFaceSheet.insertRule(`
        html {
          animation: redraw 1s linear infinite;
        }
      `)
      document.adoptedStyleSheets = [
        ...document.adoptedStyleSheets,
        fontFaceSheet,
      ]
    }
  })
}

Answer 2

If you are in a Dual monitor environment and face Input lag issues, it is related to your physical window size.

Do not attempt to try it on your big monitor, but, instead, try your chrome extension on your laptop(your MacBook) device itself. You will see it will work on your mac, but not on your connected big screen.