Since touchscreens don’t have a “hover” state, Apple has made it so on iOS devices (iPads and iPhones) if an HTML element has :hover styling in the CSS, the first click on that item will produce the :hover state, and the second click will be an actual click. This can cause problems in certain instances.
A way around it is to add a “no-touch” class to <body>, then using Javascript detect if this is a touchscreen, and if it is then remove this class. Example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Body Classes | |
| * | |
| */ | |
| function be_body_classes( $classes ) { | |
| $classes[] = 'no-touch'; | |
| return $classes; | |
| } | |
| add_filter( 'body_class', 'be_body_classes' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function($){ | |
| // Touch Device Detection | |
| var isTouchDevice = 'ontouchstart' in document.documentElement; | |
| if( isTouchDevice ) { | |
| $('body').removeClass('no-touch'); | |
| } | |
| }); |
