Mmenu.js 9.3 错误 - 故障

Question

我正在使用最新版本的 mmenu.js，并且我注意到当我尝试在 mmenu 中显示太多项目时，它会出现故障。页面闪烁（故障）并且速度显着减慢。有趣的是，我只在使用 Chrome 浏览器的 Android 设备上观察到此问题。

我在 Codepen 上模拟了 2 个版本：

第一个版本是有缺陷的，移动菜单中有 417 个项目： Bugy 版本 - 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();
                }
            );
    });

我测试过并遇到问题的设备：

真实设备： 小米 11T - Android 14 UP1A.231005.007 铬125.0.6422.72 浏览器堆栈： 三星 Galaxy S22 v12.0 - Android 12 铬123.0.6312.40 我还录制了一段视频来演示 bug 行为。

什么可能导致此问题？有办法解决吗？我是否正确假设大量项目导致了问题？

谢谢您的帮助！

我尝试过的： 我最初使用最新版本的 mmenu.js 加载了包含 417 个项目的菜单。我希望菜单能够顺利处理大量的项目，就像它处理较少的项目一样。

我的期望： 我希望菜单能够显示所有项目，而不会导致任何性能问题，例如闪烁或整个页面变慢。

实际发生的事情： 当我加载包含 417 个项目的菜单时，页面开始闪烁并显着变慢。此问题仅发生在使用 Chrome 的 Android 设备上。然而，当我将项目数量减少到 224 时，菜单完美运行，没有任何故障。

Answer 1

我遇到了同样的问题，我通过将 mmenu 版本降级到 9.1.6 来修复它