Menu not working in Mobile website when defer.js extension enabled

[toamitc]

Here is website: https://www.nashdesi.com/
I have enabled defer.js extension and it breaks menu and + icon at the top of the website. I tried disabling all settings but this breaks as soon as i enable this extension and works when i disable this extension.

[shinsenter]

Hi @toamitc,

Thank you for reaching out, and I'm sorry to hear that the plugin isn't working as expected.

Currently, your website has the plugin disabled, so I'm unable to investigate the cause of the issue.

Some other plugins and WordPress templates may not function correctly if you lazyload JavaScript, and your website might be using one or more such plugins.

Could you try disabling the JavaScript optimization and HTML minification features in the plugin and see if that resolves the issue?

It would also be very helpful if you have a development website with the defer.js plugin enabled that you can share with me for deeper debugging.

Thank you.

[toamitc]

@shinsenter - Pluggin is enabled on my website, below is screenshot

I tried disabling all the options one by one but still menus and top button does not work in Mobile view. It only works if i disable the plugin.

Unfortunately i don't have dev. site, but i have enabled plugin and you can use any browser in mobile mode and can see the issue.

[shinsenter]

Hi @toamitc

I've quickly reviewed your website, and the great thing is I didn't see any errors caused by my plugin affecting your website (as confirmed in the video below, your menu is still functioning normally).

Screen.Recording.2024-07-08.at.11.13.25-1.mov

However, it appears that some layers of the reCAPTCHA plugin might be overlaying above the menu area and are transparent, thus preventing mouse clicks on the menu.

In the video, these layers are shown in light yellow. I think it's a module within the login form template that's causing this overlay on the menu.

It seems that the issue resolves itself after reCAPTCHA has loaded and cached on the browser of the device. After refreshing the web page once or twice, the menu functions normally.

I'll think about a solution to help you address this.

[toamitc]

@shinsenter - Thanks for looking into it. It does work when we refresh page multiple times for few seconds only as script may be loading. It only happens when i enabler defer.js plugin so some sort of conflict with reCAPTCHA. I am not using anything for reCAPTCHA it's part of Hivepress theme itself and I am just setting key. This plugin is definitely very useful so looking forward to hear for any recommendation.

[shinsenter]

Hi @toamitc, it’s possible that reCaptcha is a component of Hivepress, and I noticed it appears in the login form (which is located in the mobile menu).

When you’re not using defer.js, the reCaptcha script loads an iframe before your page fully loads, so it might be hidden before the mobile menu is rendered.

When you enable defer.js, these scripts are lazy-loaded after your page has finished rendering, causing the iframes to overlap with the menu.

When you reload the page, the iframes are cached in the browser and rendered quickly enough to be hidden before the menu is rendered.

That’s my guess.

[toamitc]

@shinsenter - Your analysis is 100% correct and that is what i am seeing as well, but wondering if any option available in plugin to exclude specific script that can enable me to use plugin without braking website? To my surprise just by enabling plugin it breaks even if i disable all options. It would be good if we have an option to take care this.

[shinsenter]

@toamitc

If you can modify the reCAPTCHA script tag, you can try adding the data-ignore attribute to that script tag (e.g., <script data-ignore src="......"></script>) to exclude it from lazy loading.

Alternatively, in the plugin's settings management, uncheck the "Optimized JavaScript" option and save the settings.

[toamitc]

@shinsenter - unchecking the "Optimized JavaScript" option did not help. I have actually tried unchecking all settings and that did not help either. Would you have some pointer where can i go and modify in hivepress theme for recaptch?

[shinsenter]

@toamitc

I apologize for the delayed response.

I don't have specific suggestions for editing the theme on your WordPress site. (You may install a file editor plugin to directly modify the theme's source code. Alternatively, you can use a file transfer tool like FileZilla to download the theme's PHP files, make edits on your computer, and then upload them back to the WordPress theme directory.)