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

Solved

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

Zee12
New Member
4 0 0

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/

 

Accepted Solution (1)

EcomGraduates
Shopify Partner
629 51 89

This is an 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.

 


If this fixed your issue, likes and accepting as a solution are highly appreciated.

Build an online presence with our custom built Shopify Theme EcomifyTheme



View solution in original post

Replies 3 (3)

EcomGraduates
Shopify Partner
629 51 89

This is an 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.

 


If this fixed your issue, likes and accepting as a solution are highly appreciated.

Build an online presence with our custom built Shopify Theme EcomifyTheme



adambrandt
Shopify Partner
9 0 1

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

GMS_Developer
New Member
6 0 0

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

 

Thanks & BR,
Green Mark Soft
+92 332 3984485
greenmarksoft@gmail.com