gpt4 book ai didi

google-chrome - 为什么我的 Google Chrome 扩展程序的弹出 UI 在外接显示器上滞后,而在笔记本电脑的 native 屏幕上却没有?

转载 作者:行者123 更新时间:2023-12-04 11:10:50 28 4
gpt4 key购买 nike

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

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

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

有趣的是,如果我将相同的浏览器窗口拖到笔记本电脑的 native 屏幕上,问题就消失了。一切顺利。将同一个窗口拖到我的 2 个外接显示器和 Bam 中的任何一个!落后城市...

我在我 friend 的电脑上测试过,他也有同样的问题。在 native 屏幕上运行良好,在外部显示器上运行缓慢。到目前为止,该问题似乎只发生在 Mac 上。经过排除,我知道问题不是显示器本身造成的,与视频输入线无关。我只能在连接到我的 Macbook Pro(2015 年初)和我 friend 的 Macbook Pro(2014 年初)的外接显示器上观察到此错误。

我尝试过的事情(并没有帮助):

  • 通过 Chrome 设置禁用“硬件加速”
  • 将 Chrome 恢复到默认设置
  • 监控系统性能(CPU 和内存使用率均远低于限制)
  • 监控 Chrome 任务管理器(该扩展使用最少的内存,并且在滞后和非滞后测试之间没有显着的 CPU 使用差异)
  • 在 chrome://flags
  • 中切换一堆设置
  • 更换各种电缆(HTMI、DVI 和 VGA)

  • 想知道其他人是否遇到过类似的问题?这个奇怪的外部显示器延迟问题整周都在困扰着我,我完全没有想法。

    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 错误票证。您可以通过此链接查看: https://bugs.chromium.org/p/chromium/issues/detail?id=971701

    最佳答案

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

    关于google-chrome - 为什么我的 Google Chrome 扩展程序的弹出 UI 在外接显示器上滞后,而在笔记本电脑的 native 屏幕上却没有?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56500742/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com