Самописный сайт без фреймворков. Есть простейший скрипт для работы со стилями, который добавляет/удаляет/меняет стили элементов (в нём ошибок нет, он просто сокращается длинные обращения к свойствам элемента или добавление классов в таблицу стилей до коротких команд). После первой загрузки, и в 99% случаев всё работает корректно. Но если активно кликать во всё на сайте, и пока происходит анимация/перерисовка кликнуть в "обновить страницу", а так же иногда в случае длительного простоя(?!), происходит странное.
Ломаются все скрипты добавления/удаления стилей из элементов (Uncaught TypeError: Cannot read property 'cssRules' of undefined
), потому что таблица стилей document.styleSheets[0]
вдруг становится undefined
. Вывожу в консоль
console.log('Проверка существования таблицы стилей');
console.log(document);
console.log(document.styleSheets);
console.log(document.styleSheets.length);
console.log(document.styleSheets[0]);
На выходе: массив document.styleSheets
имеет длину length: 0
и length: 1
одновременно!!!
StyleSheetList {length: 0}
0: CSSStyleSheet {cssRules: CSSRuleList, …}
length: 1
__proto__: StyleSheetList
Как это вообще?!
Когда всё работает, length: 1
всюду, как и ожидается.
Данный баг ловится только в Chrome (89.0.4389.90). В Firefox, как бы я бешено, неистово не накликивал и не обновлял, проблемы нет.
Отправлять баг в Chrome? Ждать пока его починят? Можно ли написать годную защиту от этой ерундовой ситуации, так чтобы она не подвешивала сайт? setTimeOut не решает проблему. Если при обновлении length определилась с ошибкой, через секунду-две-пять ничего не меняется.
Плагины выключал.