Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
evomedia.lt

Links in draggable on Android Chrome

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 post
Share on other sites

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. 

Link to post
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 post
Share on other sites

I still don't see any real dragging happening on small sizes or on my phone. Are you saying that you're trying to use Draggable as a hack to make your click areas larger? 

Link to post
Share on other sites

Here's a gif to illustrate drag and click... The clicks/taps on the links don't always work on mobile chrome, and I don't understand why. Hope this clears it up a little.

 

dragging-clicking.gif

Link to post
Share on other sites

Ah, the meta tag for viewport isn't set so here's what I see on mobile, hence no dragging:

IMG_0167.PNG

 

Click the cog next to HTML and add the following to the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

That will help us view it.

Link to post
Share on other sites

Added the meta. Also at least on my phone, the list only shows up in landscape, we'll have a different approach to filter projects in portrait mode.

Link to post
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 post
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 post
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 post
Share on other sites

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?

Link to post
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 post
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
Link to post
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.

×