As we mentioned before, when “Disable Double Rendering” enabled, menu will be rendered based on users’ device, not the viewport. Meanwhile, if “Separate cache files for mobile devices” is not enabled, WP-Rocket only caches Desktop version of Elemental Menu.
So, to fix the issue, make sure that you enable separate cache files for Mobile.
You may read a detailed article explaining the root cause and solutions here.
Basically, this often happens when you enabled “Delay JavaScript execution”, either via a caching plugin or a plugin like Flying Scripts plugin. And while being delayed, there’s no script to handle the very first user interaction.
To fix the issue:
First, copy and paste the following script into your theme footer (before the closing </body>
tag).
<script id="timingDelayExecution">
// 500 milliseconds after a page loaded, trigger a fake user interaction.
if ('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0) {
window.onload = () => setTimeout(() => window.dispatchEvent(new Event('touchend')), 500); // 500 milliseconds
}
</script>
Then, exclude the timingDelayExecution
script from Delay JavaScript Execution:
Last modified: Jan 8 2022 at 06:32 PM.