Почему всплывающий пользовательский интерфейс моего расширения Google Chrome отстает на внешних мониторах, но не на родном экране моего ноутбука? - PullRequest
1 голос
/ 07 июня 2019

Итак ... Я создаю расширение Chrome, и оно включает в себя простую всплывающую страницу, которая появляется при нажатии на значок расширения. Эта всплывающая страница состоит из некоторого простого кода HTML, CSS и JQuery. Ничего особенного.

JS работает нормально, но CSS-эффекты наведения, перехода и анимации чрезвычайно запаздывают (с задержкой до 5 секунд) при взаимодействии с ним на внешнем монитор.

Все остальное работает отлично, и я вижу, что Javascript работает как ожидалось. Это просто вышеупомянутые проблемы с рендерингом CSS.

Самое смешное, что если я перетащу то же самое окно браузера на собственный экран моего ноутбука, проблема исчезнет. Все идет гладко. Перетащите то же самое окно на любой из моих 2 внешних мониторов и Бэма! Лаг сити ...

Я проверил на компьютере моего друга, и у него та же проблема. Отлично работает на родном экране, лагает на внешних мониторах. Пока что кажется, что проблема возникает только на Mac. В процессе устранения я знаю, что проблема не связана с самим монитором и не имеет ничего общего с кабелями видеовхода. Я мог наблюдать эту ошибку только на внешних мониторах, подключенных к моему Macbook Pro (начало 2015 года) и Macbook Pro моего друга (начало 2014 года).

Вещи, которые я пробовал (и не помогло):

  • Отключение «аппаратного ускорения» через настройки Chrome
  • Восстановление настроек Chrome по умолчанию
  • Мониторинг производительности системы (загрузка ЦП и памяти значительно ниже пределов)
  • Мониторинг диспетчера задач Chrome (расширение использует минимальный объем памяти и нет заметной разницы в загрузке ЦП между тестами с задержкой и без задержки)
  • Переключение настроек в chrome: // flags
  • Переключение различных кабелей (HTMI, DVI и VGA)

Хотите знать, сталкивался ли кто-нибудь еще с подобными проблемами? Эта странная проблема с запаздыванием внешнего монитора беспокоила меня всю неделю, и у меня совсем нет идей: (* ​​1031 *

Github репо в демо-проекте -> https://github.com/peachteaboba/chrome_extension_bug_demo


------------------------- Обновление --------------------- ----

Я точно определил причину ошибки. Очевидно, что если вы включите файл background.js в manifest.json, то всплывающее окно запаздывает. Если вы не включите фоновый скрипт, то отставание исчезнет.

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.

...