product is not loading for first click on iphone and ipad

[navaneetham_bal]

Hello Guys,

Am very new to Magento 2. The Product is not loading when i click on the product name in the product list page for first time on iPhone and iPad. Is anyone faced this kind of issue? also help me to resolve this issue.

[Vimal Kumar]

Hi @navaneetham_bal 

Can you share the public url of the website?

[navaneetham_bal]

Hi @Vimal Kumar 

Here is the public url of website: https://a19ha.mastbazaar.com/ 

[Vimal Kumar]

HI @navaneetham_bal 

Css class ".modals-wrapper" is creating issue.

.modals-wrapper{
display:none !important;
}

add the above property in admin theme section for now and try.

Then flush the cache and try once.

I hope it will help you!

[navaneetham_bal]

Hi @Vimal Kumar 

i have tried the way you suggested but its still same the product is not loading for first click on iPhone.

[alexsky133d1a5]

I've experienced a similar issue before. It could be related to JavaScript not executing properly on the first click due to a mobile-specific glitch. Here's what you can try:

1. Cache & JavaScript Issue: Clear the Magento cache and check for any custom JavaScript that might be conflicting. You can also try disabling JavaScript minification.

2. Theme & Browser Compatibility: Ensure your theme is fully compatible with iOS devices. Test with a default theme to see if the issue persists.

3. Check Logs: Look for any errors in the console log on the browser's developer tools. It might give you a clue if there's a script failing to load.

If the issue continues, consider reaching out to a Magento specialist.

[juwacasino2a67]

Here’s a condensed version of the troubleshooting steps for your issue where products are not loading on the first click on iPhone and iPad:

Quick Troubleshooting Steps:

1. JavaScript Execution Delays: Check for JavaScript errors using Safari Developer Tools connected to your device.

2. Lazy Loading Issues: Temporarily disable lazy loading scripts to see if it resolves the problem.

3. Touch Event Handling: Ensure event listeners handle touch events (`touchstart`, `touchend`) along with clicks.

4. Caching Problems: Clear cache, especially Full Page Cache (FPC) and Varnish, to see if it fixes the issue.

5. Viewport Meta Tag: Ensure the meta tag is correctly set: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.

6. Responsive Design Conflicts: Test with different screen sizes to identify CSS or JavaScript that doesn't work well on mobile.

7. Browser Compatibility: Test across different browsers on iOS to check if it’s Safari-specific.

8. Network and Server Delays: Monitor server performance for slow response times affecting the first interaction.

Try these steps, and let me know if you need further assistance!