Chrome Extension Input Lags [duplicate]

Question

The Chrome Extension I am creating has a form on the popup. When Typing into a text area or input, there is a really bad lag (2-3 seconds per keystroke).

The really odd thing is that it only has a really bad lag if the following is true:

1. Chrome is running on a separate display (I use for example an Apple LED Cinema Display (27-inch)). Oddly everything works perfectly fine on just my regular laptop and everyone in my offices laptop.

2. The input is on the top half of the popup (like the top half of the screen)

3. It is running on MacOs

The lag is caused by the background.js script, removing the background portion of manifest.json removes the delay. Does anyone know why this might be happening, and how I could remove the lag without removing my background.js file?

//index.js

/*global chrome*/
import React, {Fragment, Component} from 'react';
import ReactDOM from 'react-dom'; 

class App extends Component {

    render(){

      return (
        <div className="App">
        <input style={{marginTop: '400px'}} placeholder="I have a horrible lag"></input>
      </div>
      )
    }

}

ReactDOM.render(<App />, document.getElementById('root'));


// manifest.json
{
  "manifest_version": 2,
  "name": "extension",
  "author": "me",
  "version": "1.0.1",
  "description": "description",
  "browser_action": {
    "default_popup": "index.html"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
   },
   "permissions": ["tabs"],

   "web_accessible_resources" : ["*.html"]
}


// background.js
console.log("background.js is running")

I get no error messages. If I replace '400px' to '100px' I get no lag

Thank you in advance

Update: This bug was created at https://bugs.chromium.org/p/chromium/issues/detail?id=971701

Answer 1

For those who are still struggling with this issue I will repost a deleted answer which I finally found and which perfectly fixes the problem even though it's a workaround, but since the bug was reported 2 years ago and there is no fix we should learn how to live with it ¯_(ツ)_/¯:

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