hover state appearing on touch in mobile/devices
Home › Forums › Older releases › 0.9.x › hover state appearing on touch in mobile/devices
- This topic has 7 replies, 2 voices, and was last updated 4 years, 9 months ago by
robotchips.
-
AuthorPosts
-
January 6, 2016 at 21:56 #2929
robotchips
ParticipantHello 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!
January 7, 2016 at 12:09 #2930admin
KeymasterHi, can you see the same effect on the following page:
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.January 7, 2016 at 23:20 #2938robotchips
ParticipantHi, 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.
January 8, 2016 at 14:36 #2939admin
KeymasterThanks 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 whenhideOnClick: 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!
January 8, 2016 at 19:00 #2940robotchips
ParticipantAwesome! 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.
January 9, 2016 at 12:51 #2942admin
KeymasterSure, 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!
January 14, 2016 at 12:49 #2944admin
KeymasterOK, 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.
March 30, 2016 at 03:53 #3105robotchips
ParticipantVery coo! 378,804,235 days later for my reply, but great 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.