Я смоделировал две версии на Codepen:Первая версия — глючная, с 417 пунктами в мобильном меню:
Версия с ошибками — Codepen
Видео тестирования — YoutubeВторая версия идентична первой, но содержит всего 224 элемента. Этот работает нормально:
Рабочая версия — Codepen
Тестовое видео — Youtube
Инициализация:
Код: Выделить всё
document.addEventListener('DOMContentLoaded', function () {
//Mmenu initialize
const menu = new Mmenu( "#js-mobile-nav", {
"offCanvas": {
"position": "left-front"
},
"counters": {
"add": true
}
}, {
offCanvas: {
page: {
selector: ".main-content"
}
}
});
const api = menu.API;
//Hamburger menu click event
document.querySelector("#js-hamburger-icon").addEventListener(
"click", (evnt) => {
evnt.preventDefault();
api.open();
}
);
document.querySelector(".js-close-menu").addEventListener(
"click", (evnt) => {
evnt.preventDefault();
api.close();
}
);
});
Реальное устройство:
Xiaomi 11T – Android 14 UP1A.231005.007
Chrome 125.0.6422.72
Стек браузера:
Samsung Galaxy S22 v12.0 - Android 12
Chrome 123.0.6312.40
Я также записал видео, демонстрирующее ошибку.
Что может быть причиной этой проблемы? Есть ли способ решить эту проблему? Прав ли я, полагая, что проблема связана с большим количеством элементов?
Спасибо за помощь!
Что я пробовал :
Изначально я загрузил свое меню из 417 пунктов, используя последнюю версию mmenu.js. Я ожидал, что меню будет плавно обрабатывать большое количество элементов, как и с меньшим количеством элементов.
Чего я ожидал:
Я ожидал мменю для отображения всех элементов без каких-либо проблем с производительностью, таких как мерцание или замедление всей страницы.
Что на самом деле произошло:
Когда я загрузил меню с 417 пунктами, страница начала мерцать и существенно тормозить. Эта проблема возникала только на устройствах Android, использующих Chrome. Однако когда я уменьшил количество пунктов до 224, меню заработало идеально, без каких-либо сбоев.
Подробнее здесь: https://stackoverflow.com/questions/785 ... -glitching