- This topic has 3 replies, 2 voices, and was last updated 3 years, 1 month ago by Tom.
-
AuthorPosts
-
February 17, 2021 at 8:55 pm #1662637Roman
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.
February 18, 2021 at 8:20 pm #1663950TomLead DeveloperLead DeveloperHi 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!
February 18, 2021 at 10:41 pm #1664001RomanHi, 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; }
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.February 19, 2021 at 10:55 am #1664893TomLead DeveloperLead DeveloperThanks for this! Noted. Will see what we can do to improve it in GP 3.1.0 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.