Fixing “double tap” to activate controls on mobile

You might’ve noticed an issue on mobile devices, when in some cases the elements on screen require a second tap to activate themselves. It can be often noticed when trying to access the mobile menu.

Of course, we’ve tested a bunch of third party caching solutions and only some of these present this behaviour and only if the features described below are activated.

You might want to try these troubleshooting steps if you’re encountering errors with the mobile menu, lazy loading, the cards reveal effect, etc.

Explanation

This happens mostly due to caching plugins that offer a defer or delay feature for JavaScript files. This kind of feature usually require some interaction from the user, as small as it can be, to activate the remaining scripts. Such actions are moving the mouse around on a desktop device, or the first touch on mobile, since mobiles do not have a pointer.

If that would be implemented correctly, some elements on the screen wouldn’t require this “double tap” interaction to happen, for them to activate. But this is on the third party plugins’ part, so we cannot do much from our end to get around this.

All of this comes into play to offer a perceived increase of speed when loading a page. Yes, this is just a placebo effect mostly, because the remaining scripts still need to load on first interaction.

The Fix!

At the moment, there’s one set and forget fix. That is to exclude Blocksy’s main JavaScript file from being processed by these plugins. The performance hit should be minimal, because on the code level, we’ve also implemented selective loading for our JavaScript chunks. The main.js file is super small.

Path to file

/wp-content/themes/blocksy/static/bundle/main.js

Please make sure you clear everything out after making the change, including regenerating the minified JavaScript and CSS files.

Not the solution you are looking for?

Please check other articles or open a support ticket.