Jump to content
Search Community

Links in draggable on Android Chrome

evomedia.lt test
Moderator Tag

Recommended Posts

Hello,

 

I've created a projects slider with interactive draggable projects menu. The snipped runs bi-directionally - if you scroll through projects it uses scrollTrigger to update the projects menu, and in reverse - if you click items in the menu, it scrolls the website to the chosen project.

 

The problem is with the draggable projects menu, it works great on desktop and on android firefox, however in Android Chrome and on native Samsung Browser the links don't always work. It changes colour, as if the hover event fired, however touch/click doesn't register. I've tried adding Draggable setting of minimumMovement up to 20, but it doesn't help, and once I touch the link it visibly moves a few pixels so it seems like the dragging overpowers the click/tap.

 

Please check out the codepen example in Android Chrome in landscape mode. (Sorry for the messy code, it had to be extracted from a bigger code).

 

Thank you in advance

See the Pen JjXdqxp by driezis (@driezis) on CodePen

Link to comment
Share on other sites

17 minutes ago, ZachSaucier said:

Hey evomedia. What's dragging supposed to do? It's kinda moving around the timeline options but not actually navigating between them for any browser for me. 

Hello Zach.

Dragging is so that the entirety of projects menu could be accessible on smaller screens, so when the window is narrow you can drag it up/down to reach desired option then tap/click on it to get to the project on the right.

 

The issue is clicking/tapping on the links. They not always work on android chrome.

Link to comment
Share on other sites

On my phone in landscape with the meta tag applied (which is standard) it doesn't show the menu. I recommend that whatever your different approach to filter projects in portrait mode you also do for landscape mode on phones. It'd likely have better useability. Then you don't have to worry about this anyway :) 

Link to comment
Share on other sites

11 minutes ago, ZachSaucier said:

On my phone in landscape with the meta tag applied (which is standard) it doesn't show the menu. I recommend that whatever your different approach to filter projects in portrait mode you also do for landscape mode on phones. It'd likely have better useability. Then you don't have to worry about this anyway :) 

 

Maybe try the full pen url (like the one in the screenshot)? For me it shows like the picture attached. Also I am certain that if it shows this behavior with a phone, it will be the same with Android tablets. Hiding the issue doesn't really solve it. 

 

Thank you for your patience :)

Screenshot_20200811-033156_Chrome.jpg

Link to comment
Share on other sites

Hey @ZachSaucier, I've made a more readable example of the issue.

 

It's illustrated in this codepen:

See the Pen xxVwdQL by driezis (@driezis) on CodePen

 

I also attached a gif to illustrate the problem. You can see that once you drag/scroll only the hover action gets registered when you tap it, and it is kind of random - sometimes clicks go through, sometimes they don't. The screenshot was recorded on my Samsung Galaxy Note 8, Chrome browser. The links work great in Android Firefox.

mobile-link2.gif

  • Thanks 1
Link to comment
Share on other sites

43 minutes ago, ZachSaucier said:

Thanks for the minimal demo! That's super helpful. 

 

I'm not seeing that behavior on my LG-M322 in Chrome. Have you tested on other Android devices? Is your browser and OS up to date?

Hello,

I've attached my chrome version screenshot.

It seems the issue only happens right after drag/release. Maybe the inertia plugin is interfering with the clicks until the animation is fully done?

chromever.png

Link to comment
Share on other sites

I updated the minimal demo with a "fix" that works for me. Instead of click event I'm tracking for pointerdown and pointerup events. On pointerdown I record the pointer Y position along with timestamp, then wait for pointerup to happen. If pointer moved less than 6 pixels to either direction and there was less than 130 millisecond span between the events I register it as a click/tap and select the item. It's a crude workaround, but at least it works for now.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...
On 8/12/2020 at 5:29 AM, evomedia.lt said:

I updated the minimal demo with a "fix" that works for me. Instead of click event I'm tracking for pointerdown and pointerup events. On pointerdown I record the pointer Y position along with timestamp, then wait for pointerup to happen. If pointer moved less than 6 pixels to either direction and there was less than 130 millisecond span between the events I register it as a click/tap and select the item. It's a crude workaround, but at least it works for now.

 

I  was having the same problem on  chrome with android devices and this solve the issue for me too!

Thanks!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...