[Resolved] Clicking the arrow on menu parent on mobile Chrome does not work

[Sebastien]

Hi GP team,

The hover menu on mobile does not work in Chrome at the moment. When I click on the arrow on a parent menu to reveal the submenu, a JS error message is thrown and the click event takes me straight to the parent page. This is only happening in Chrome, in Firefox, the arrow clicking event is working as expected. This is the error message in the Google Chrome JS console:

Unable to preventDefault inside passive event listener invocation.
r @ menu.min.js:1

So it seems to be happening at line 50 of menu.js (once the code is formatted in a pretty way):

if ((t.closest("nav").classList.contains("toggled") || u.classList.contains("slide-opened")) && !c.classList.contains("dropdown-click")) {
                e.preventDefault();

I’m using the latest version of Chrome.

Is there any way to fix this please?

[Leo]

Hi there,

Have you fixed this?

I’m not seeing the console error.

If not can you disable all plugins to eliminate any conflicts?

Thanks 🙂

[Sebastien]

No, I have not fixed this. Are you loading the URL I put in my initial post? When I click on the arrow on the mobile menu, the menu expands but it also loads the page. I see the menu expanding for a few millisecons before being taken to the parent page. The error message will show for a second in the console before I get taken to the second page loads.

At first I thought it was my caching plugins so I disabled them. I then disable all the plugins one by one but it does not change anyhting. This does not happen with Firefox.

[Leo]

Can you disable all at once and let me take a look?

[Sebastien]

All plugins are deactivated at the moment, and the problem still persists

[Leo]

I’m still seeing LiteSpeed cache activated in the source code.

Can you double check?

[Sebastien]

I am not sure that we’re looking at the same site, so my apologies if I caused any confusion. This is my testing environment where the issue is happening (on the whole website).

All the plugins are deactivated, just GP theme running on this one. There is no LiteSpeed cache either.

[Tom]

Hi there,

LiteSpeed is still active on that site – if you view the source of the page you’ll see everything is minified, and it says <!-- Page generated by LiteSpeed Cache 3.3 on 2020-08-10 14:43:45 --> at the bottom.

What WordPress version are you running?

[Sebastien]

Hi Tom,

I’m running on the latest version of WordPress. I’m so confused because I see all the plugins deactivated including LiteSpeed Cache plugin. The site is on its own subdomain. I do not see minified HTML and the html comment about the page being generated by Litespeed Cache

[Sebastien]

Hang on, it might be the CDN Cloudflare still serving the page that was cached from the closest server to you when you initially loaded that page. THe CDN cache is deactivated for that subdomain but it seems to serve you the old page (which was generated by the litespeed cache). Let me do a purge so you can see

[Sebastien]

Are you able to load the page as I see it now?

[Sebastien]

Are you loading the page in incognito mode?

[Tom]

That’s likely because you’re logged in. Something is holding on to the cache, which makes it near impossible to debug.

Is the HTML still not minified if you log out?

Yes, I’m still seeing the Litespeed message in incognito mode.

[Sebastien]

HTML is not minified as I log out but I managed to replicate the page you see when I use a VPN. So let me try to see what’s happening. I think it is the CDN cache level doing this.

[Sebastien]

The LiteSpeed server was still serving the cache although the plugin was disabled, so I had to delete the cache from the server manually.

You should now be able to load the page and hopefully replicate the problem that I’m having with the mobile menu on Chrome.

[Author]

Posts