How can I fix the iOS double tap problem for hover effects?

[Zee12]

Hi i need some help around the IOS double tap problem for hover effects. This link describes my problem pretty well: https://stackoverflow.com/questions/55732058/how-to-fix-a-double-tap-hover-issue-on-on-mobile-ios

On mobile devices hover event is missing, that's why the first tap is being considered as hover, then the second one as click. I need that fixed to be one tap only is it possible? 

Here's another link that describes my problem pretty well: https://wordpress.org/support/topic/double-click-on-mobile-device-issue/

[EcomGraduates · Accepted solution]

Hello there 

Yes, it is possible to disable the hover effect on mobile devices to ensure that the first tap is recognized as a click. Here are the steps you can follow:

1. In your Shopify admin panel, go to "Online Store" > "Themes" and click on "Actions" > "Edit code" for the theme you're working on.
2. In the file list, find the file that contains the code for the hover effect you want to disable. This could be a JavaScript file or a CSS file, depending on how the hover effect is implemented.
3. Add the following code to disable the hover effect on touch devices:

@media (hover: none) {
  /* Add CSS rules to disable hover effect on touch devices */
}

the "@media (hover: none)" rule targets devices that do not support hover, such as smartphones and tablets.

1. Within the "@media (hover: none)" rule, add the necessary CSS or JavaScript code to disable the hover effect. This may involve changing the CSS selectors or modifying the JavaScript event handlers to use "click" instead of "mouseover" or "mouseenter".

2. Save the file and preview your store on a mobile device to ensure that the hover effect is disabled and the first tap is recognized as a click.

[adambrandt]

How do I disable hover click for the whole store for iOS mobile?

[GMS_Developer]

Hi,
Yes, you are right, This theme doesn't have this feature on mobile but it can be possible not big issue.