下拉菜单在滑块上闪烁，仅适用于 Android 版 Chrome

Question

我对这一切都很陌生，如果这是一个愚蠢的问题，请道歉：

我在这里有一个 Magento 站点：http://www.thisisnotavegetable.com 它使用响应式设计，当显示在移动宽度的浏览器上时，顶部菜单变成了启用 javascript 的下拉菜单。

这一切都很好，除了在主页上（它通过启用 javascript 的滑块加载），并且只在 Chrome for Android 上。在该浏览器上，下拉菜单闪烁并且链接文本不会显示。我认为这是一个 jQuery 问题，但我还不够先进，无法弄清楚。

非常感谢任何帮助！ 亚历克斯

下面是下拉菜单的 jQuery（我认为）。滑块是 ioSlider。我希望有人可以在不需要看到 jQuery 的情况下帮助我，因为它没有格式化，而且许可证上说我不应该发布它。

if (jQuery('#categories-accordion').length){
    jQuery('#categories-accordion li.level-top.parent ul.level0').before('<div class="btn-cat"><div class="inner"></div></div>');
    if(mobileDevice == true){
        jQuery('#categories-accordion li.level-top.parent').each(function(){
            jQuery(this).on({
                click: function (){
                    if(!jQuery(this).hasClass('touched')){
                        jQuery(this).addClass('touched closed').children('ul').slideToggle(200);
                        clearTouch(jQuery(this));
                        return false;
                    }
                }
            });
        });
    }else{
        jQuery('#categories-accordion li.level-top.parent .btn-cat').each(function(){
            jQuery(this).toggle(function(){
                jQuery(this).addClass('closed').next().slideToggle(200);
            },function(){
                jQuery(this).removeClass('closed').next().slideToggle(200);
            })
        });
    }
}

Answer 1

如果你能发布 jQuery 代码那就太好了:)

闪烁可以通过使用硬件加速来解决。您可以通过添加“-webkit-transform: translateZ(0);”来强制浏览器使用硬件加速。进入移动菜单的css类。

      mobileMenu {
          ...
          -webkit-transform: translateZ(0);
          }