Menu above built with this plugin including Mega Menu.

Slight delay on menu open/class added to html element

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Featherstone 3 weeks, 6 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #54886 Reply

    Tony Merryweather
    Participant

    Hi there,

    I’m currently building two sites with the plugin. One is working fine, the other is all good except for the slightest delay (maybe 300 ms) after clicking the hamburger before the mobile menu opens or closes. If inspecting the code, you can see a slight delay before the responsive-menu-pro-open class is added or removed from the html element (and is-active is added to the button element).

    There are no console errors and nothing shows up in debug mode.

    Unfortunately they are both test sites that I can’t share here. Both sites use the Genesis Framework. The one with the issue uses a theme built on the latest Genesis Sample theme which utilises new Genesis functionality so possibly there is a conflict in there somewhere.

    Was hoping there might be a generic issue that causes this problem.

    Any help appreciated.

    Cheers,

    Tony

    #54887 Reply

    Hey Tony,

    The classes are only added once the menu is fully opened which will take some time for the animation to complete.

    You could set the transition or animation speeds to 0 but I’m not sure it would look very nice.

    All the best

    Peter

    #54893 Reply

    Tony Merryweather
    Participant

    Hi Peter,

    Thanks for the quick response. So the issue is therefore on the click, not anything that happens after it.

    After reading this https://stackoverflow.com/questions/20557706/what-might-make-click-events-slow-to-fire I used the DevTools Performance tool and got the following:

    Site 1 with hamburger responding quickly – Tap Begin 0.45 ms, Tap 21.04 ms
    Site 2 with hamburger responding slowly – Tap Begin 221.56 ms, Tap 269.82 ms

    The Tap can’t happen until Tap Begin has finished so it’s the Tap Begin event that is causing the delay. Something is causing it to blow out from 0.45 ms to 221.56 ms.

    The functionality of each menu is identical (json copied across from one site to the other). Have tried deactivating plugins with no change.

    Any ideas?

    Cheers,

    Tony

    #54894 Reply

    Tony Merryweather
    Participant

    Ok so it appears to be due to a theme customisation that I have done. Still trying to work out what but no need to follow up. When I use the Gesesis Sample theme without customisations the delay disappears.

    I think the behaviour is due to this – https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away – It’s the 300ms waiting for a double tap. I know this because the site with the slow response has a Tap Unconfirmed event – https://www.chromium.org/developers/design-documents/aura/gesture-recognizer. If I add html {touch-action: manipulation;} to CSS it removes the delay.

    That’s a bit of a hack so will try to find the culprit in the theme files. Will post here if I work it out in case it helps Genesis Devs who encounter a similar problem.

    #54897 Reply

    Tony Merryweather
    Participant

    So it ended up being Gutenberg-related. There were full-width Gutenberg blocks throughout the site, and below 960px (same as the Responsive Menu) I hadn’t offset a negative margin with an equal amount of padding which meant the layout was slightly broken. So I am assuming that the broken layout then took the menu slightly out of the DOM which caused all sorts of issues.

    Moral of the story is to be careful with negative margins.

    Thanks for the initial help!

    #54898 Reply

    Hey Tony,

    Wow what a strange one and thanks for keeping me updated, very useful info!

    Peter

Viewing 6 posts - 1 through 6 (of 6 total)
Reply To: Slight delay on menu open/class added to html element
Your information:





<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">

Responsive Menu Title Image
Responsive Menu
No coding knowledge needed