Google chrome 为什么我的Google Chrome扩展是'；在外部显示器上显示弹出式UI，但在我的笔记本电脑上不显示'；什么是本机屏幕？

所以。。我正在构建一个chrome扩展，它包括一个简单的弹出页面，当你点击扩展的图标时会出现。这个弹出页面由一些简单的HTML、CSS和jQuery代码组成。没什么特别的

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

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

有趣的是，如果我把同一个浏览器窗口拖到笔记本电脑的本机屏幕上，问题就消失了。一切顺利。将同一窗口拖到我的2个外部监视器和Bam中的任意一个上！落后城市

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

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

• 通过Chrome设置禁用“硬件加速”
• 将Chrome恢复为默认设置
• 监控系统性能（CPU和内存使用率均远低于限制）
• 监控Chrome任务管理器（该扩展使用最小内存，laggy和非laggy测试之间没有明显的CPU使用差异）
• 在中切换一组设置chrome://flags
• 断开各种电缆（HTMI、DVI和VGA）

想知道是否还有其他人遇到过类似的问题？这个奇怪的外部监视器延迟问题困扰了我整整一周，我已经没有主意了

Github回购至演示项目->

---

-------------------------更新------------------------- 我已经查明了这个错误的根源。显然，如果在manifest.json中包含background.js文件，则弹出窗口会延迟。如果不包括背景脚本，则延迟消失

manifest.json（LAGY版本）

{
“清单版本”：2，
“名称”：“Chrome扩展错误演示v2”，
“说明”：“Chrome扩展错误演示v2”，
“版本”：“2.00”，
“作者”：“作者”，
“浏览器操作”：{
“默认图标”：“images/bug.png”，
“默认标题”：“Chrome Extension Bug Demo v2”，
“默认弹出窗口”：“popup.html”
},
“chrome_url_覆盖”：{}，
“权限”：[
“存储”，
“选项卡”
],
“背景”：{
“脚本”：[
“js/background.js”
]
},
“网络可访问资源”：[
“script.js”
],
“外部可连接”：{
“匹配项”：[
“http://*/*”，
“https://*/*”
],
“接受频道id”：真
}
}

manifest.json（非LAGY版本）

{
“清单版本”：2，
“名称”：“Chrome扩展错误演示v2”，
“说明”：“Chrome扩展错误演示v2”，
“版本”：“2.00”，
“作者”：“作者”，
“浏览器操作”：{
“默认图标”：“images/bug.png”，
“默认标题”：“Chrome Extension Bug Demo v2”，
“默认弹出窗口”：“popup.html”
},
“chrome_url_覆盖”：{}，
“权限”：[
“存储”，
“选项卡”
],
“背景”：{
“脚本”：[
]
},
“网络可访问资源”：[
“script.js”
],
“外部可连接”：{
“匹配项”：[
“http://*/*”，
“https://*/*”
],
“接受频道id”：真
}
}

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

---

此问题有一张Chromium bug罚单。您可以通过此链接查看：

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

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

/**
*MacOS上不进行重绘的辅助监视器的临时解决方案
*@见https://bugs.chromium.org/p/chromium/issues/detail?id=971701
*/
如果(
//通过测试，以下条件似乎表明弹出窗口是在辅助监视器上打开的
window.screensleft<0||
window.screenTop<0||
window.screenlight>window.screen.width||
window.screenTop>window.screen.height
) {
chrome.runtime.getPlatformInfo（函数（信息）{
如果（info.os=='mac'）{
const fontFaceSheet=new CSSStyleSheet（）
fontFaceSheet.insertRule(`
@关键帧重绘{
0% {
不透明度：1；
}
100% {
不透明度：.99；
}
}
`)
fontFaceSheet.insertRule(`
html{
动画：重画1s线性无限；
}
`)
document.adoptedStyleSheets=[
…document.adoptedStyleSheets，
fontFaceSheet，
]
}
})
}

如果您处于双监视器环境中，并且面临输入滞后问题，则它与您的物理窗口大小有关

---

不要尝试在你的大显示器上试用，而是在你的笔记本电脑（MacBook）设备本身上试用你的chrome扩展。你会看到它可以在你的mac电脑上运行，但不能在连接的大屏幕上运行。

你的“更新”是答案吗？如果是这样的话，就用“你的答案”框来回答你自己的问题吧…@HereticMonkey这不是答案，只是关于这个问题的额外信息。我不是唯一一个经历过这个的人。我也经历过这个！过渡和css动画会错过许多帧，有时甚至不会出现