时间戳

首页 > 解决方案 > 为什么我的 Google Chrome 扩展程序的弹出式 UI 在外部显示器上滞后，但在笔记本电脑的本机屏幕上却没有？

google-chrome - 为什么我的 Google Chrome 扩展程序的弹出式 UI 在外部显示器上滞后，但在笔记本电脑的本机屏幕上却没有？

问题描述

所以.. 我正在构建一个 chrome 扩展程序，它包括一个简单的弹出页面，当您单击扩展程序的图标时会出现该页面。这个弹出页面由一些简单的 HTML、CSS 和 jQuery 代码组成。没有什么花哨。

JS 似乎运行良好，但当我在外部显示器上与它交互时，CSS 悬停、过渡和动画效果非常滞后（最多滞后 5 秒） 。

其他一切都运行得很好，我可以看到 JavaScript 正在按预期执行。就是上面提到的 CSS 渲染问题。

有趣的是，如果我将同一个浏览器窗口拖到笔记本电脑的本机屏幕上，问题就消失了。一切运行顺利。将同一个窗口拖到我的 2 个外部显示器和 Bam 中的任何一个上！滞后市...

我在朋友的电脑上测试过，他也有同样的问题。在本机屏幕上运行良好，在外接显示器上运行缓慢。到目前为止，该问题似乎仅发生在 Mac 上。通过排除的过程，我知道问题不是显示器本身引起的，与视频输入线无关。我只能在连接到我的 Macbook Pro（2015 年初）和我朋友的 Macbook Pro（2014 年初）的外接显示器上观察到这个错误。

我尝试过的事情（但没有帮助）：

想知道是否有其他人遇到过类似的问题？这个奇怪的外接显示器延迟问题整个星期都在困扰着我，我完全没有想法。

演示项目的 Github 存储库 -> https://github.com/peachteaboba/chrome_extension_bug_demo

- - - - - - - - - - - - - 更新 - - - - - - - - - - - - -

我已经查明了错误的根源。显然，如果您在 manifest.json 中包含一个 background.js 文件，那么弹出窗口就会滞后。如果您不包含后台脚本，那么滞后就消失了。

manifest.json（滞后版本）

{
  "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（非滞后版本）

{
  "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
  }
}

所做的唯一更改是从背景脚本部分中删除“js/background.js”。实际的 background.js 文件是空的，所以即使包含这个空脚本也会触发 Chrome 错误。

有针对此问题的 Chromium bug 票证。您可以通过此链接查看：https ://bugs.chromium.org/p/chromium/issues/detail?id=971701

标签： google-chromemultiple-monitorsperformancecss

解决方案

我们在 usebubbles.com 的 Chrome 扩展程序的生产中遇到了这个问题，并通过在 MacOS 上的辅助监视器上打开弹出窗口时强制重新绘制来解决这个问题。

只需将以下内容添加到 popup.html 中包含的 javascript 文件的顶部：

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

推荐阅读