hover state appearing on touch in mobile/devices

[robotchips]

Hello out there 🙂

Currently, on my page all links and buttons OUTSIDE of the sm menu component show the hover effect in mobile when touching said elements… (I am not pressing, it is just a simple gesture to slide down the page) I noticed a majority of sites do not behave like this on mobiles/devices. What in the SM script could be causing this and how would I be able to target and disable this extra action that is occurring..?

Is this a bug, as designed or perhaps I implemented wrong?

I noticed the same occurs in your demo page, http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html The “hamburger” icon shows shows the hover state on simple touch gesture.

Thanks!

[admin]

Hi, can you see the same effect on the following page:

http://getbootstrap.com/

I guess – yes?

There isn’t anything in the SmartMenus script that could alter this default browser behavior. If there are any :hover and :active styles defined in your CSS, then it’s normal to get this behavior (in most if not all) mobile browsers on your pages.

[robotchips]

Hi, Thanks for the quick response.

I opened that gbs URL on my phone and actually didn’t get that effect. Nothing is invoked until I tap the button.

For a second quick test, I did a clean copy of your demo assets and still the bottom button hovers on just swiping/touch.

http://www.prosites.com/clients/00001/demo/index2.html

Perhaps something in the script IS impacting that hover behavior??

I appreciate your help.

[admin]

Thanks for the follow up! I did some thorough testing and found out this seems to be an iOS issue (not sure if we could call it a bug) and indeed it is caused by the SmartMenus script but could well be caused by many other scripts.

It seems to be triggered if an event listener is added on the document for any touch event (touchstart, touchmove, touchend…). And the SmartMenus script does that for a couple of features:

1) the runtime mouse/touch input detection code;
2) for more reliable reseting of the sub menus on touch devices when hideOnClick: true is used (since clicks on the document are not always fired in some browsers if we tap outside the menu tree).

Unfortunately, it’s not very simple to fix these quickly. For 1) the code could be refactored but for 2) there just isn’t any workaround I am aware of right now so I will need to do further investigation of the issue before figuring out a proper fix.

BTW, the cause for this seems to be so generic that I guess many many other websites have the same behavior. I noticed even http://www.google.com has it so I guess it’s not that serious concern for end users. But, in any case, I will try to figure out a way to avoid this.

Thanks again for your input!

[robotchips]

Awesome! I’ve noticed it in some sites as well. I guess its more apparent in our sites since we have a heavier then usual buttons, text links, and other areas of call to action buttons. It hasn’t raised any eyebrows with our quality assurance dpt and or user end so you’re right, its not a serious concern. That said, we’ll have the ONE client who will notice and complain. lol

I would really appreciate it if you did come up with some fix/path/solution. We love the the product. It has been super reliable and a key component in development of our responsive sites. Would you follow up in this chat string? Im not expecting anything anytime soon but perhaps keep me posted!

Thanks, Joseph.

[admin]

Sure, I’ve added a note and will post again in this thread as soon as there is any news. I will try to investigate the issue again the coming week.

Cheers!

[admin]

OK, a quick status report. I did some additional research the past few days.

The bad news is that it turns out it is actually not possible to implement a sensible workaround for this in the SmartMenus code without losing some important functionality – and that is hiding the sub menus on touch devices (like iPad, etc.) when you tap elsewhere on the page. There is just no way to do it without listening to some touch* events on the document. I guess this is why the issue affects many other scripts and even popular frameworks like jQuery mobile.

The good news is that I actually found an existing open WebKit bug report:

https://bugs.webkit.org/show_bug.cgi?id=138816

and I posted a comment in the hope that it will be taken more seriously and fixed soon.

So, unfortunately, and I really hate to say it, there doesn’t seem to be anything else I could do about it right now.

[robotchips]

Very coo! 378,804,235 days later for my reply, but great 🙂

[Author]

Posts