[Support request] Two sub-menus on top of each other

Home Forums Support [Support request] Two sub-menus on top of each other

Home Forums Support Two sub-menus on top of each other

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1662637
    Roman

    I noticed strange behavior on mobile devices.

    If you tap fast and randomly on menu items on mobile device (Android, Chrome Browser) you could open two sub menus simultaneously. Also you could achieve this in desktop version of Chrome in mobile simulation mode, but it’s harder and appears less often.

    I started to dig dipper into this problem and turned off all my custom JS and CSS code.
    I left only following custom CSS to investigate a cause:

    #primary-menu > ul > li.sfHover {
    	background:blue !important;
    }
    #primary-menu > ul > li:hover {
    	outline: 5px green solid;
    }

    Here is image of the problem.

    I’ve found out that this problem is caused by GP default CSS:

    .main-navigation:not(.toggled) ul li.sfHover > ul, .main-navigation:not(.toggled) ul li:hover > ul {
    	left: auto;
    	opacity: 1;
    	transition-delay: 150ms;
    	pointer-events: auto;
    	height: auto;
    	overflow: visible;
    }

    Somehow on mobile devices class .sfHover and CSS :hover may trigger on different menu items.

    Perhaps, GP team should reconsider JS code that gives mobile menu .sfHover class.

    #1663950
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The sfHover class is there for accessibility reasons – it allows you to tab through the menu items/sub-menu items using your keyboard.

    However, the class should remove itself when the item is no longer in focus. It sounds like you’re causing the javascript/browser to get confused by tapping fast on multiple items (not standard user behavior). I’ll take a look, but the javascript itself is very simple and works as intended under normal circumstances.

    Will investigate further.

    Thanks!

    #1664001
    Roman

    Hi, Tom!

    Here I made a video of this problem. I deleted all custom JS and CSS code except:

    #primary-menu > ul > li.sfHover {
    	background:blue !important;
    }
    #primary-menu > ul > li:hover {
    	outline: 5px green solid;
    }

    Video

    It’s a complex problem. In my opinion at appears in two cases.
    1) Several menu items can simultaneously have .sfHover class. For example in case you tap and hold on other menu item when Chrome menu pops up.
    2) On some condition menu item can have CSS class :hover regardless of whether it have .sfHover or not.

    Some ideas
    Maybe you should disable hover on touch devices. For example @media (hover: hover).
    And on tap delete all other .sfHover except last one.

    Article about it on Medium

    #1664893
    Tom
    Lead Developer
    Lead Developer

    Thanks for this! Noted. Will see what we can do to improve it in GP 3.1.0 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.