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

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,      ]    }  })}

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.