Share Posted August 10, 2020 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 More sharing options...
Share Posted August 10, 2020 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 comment Share on other sites More sharing options...
Author Share Posted August 10, 2020 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 More sharing options...
Share Posted August 10, 2020 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 comment Share on other sites More sharing options...
Author Share Posted August 10, 2020 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. Link to comment Share on other sites More sharing options...
Share Posted August 10, 2020 Ah, the meta tag for viewport isn't set so here's what I see on mobile, hence no dragging: 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 comment Share on other sites More sharing options...
Author Share Posted August 10, 2020 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 comment Share on other sites More sharing options...
Share Posted August 11, 2020 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 More sharing options...
Author Share Posted August 11, 2020 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 Link to comment Share on other sites More sharing options...
Author Share Posted August 11, 2020 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. 1 Link to comment Share on other sites More sharing options...
Share Posted August 11, 2020 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 comment Share on other sites More sharing options...
Author Share Posted August 11, 2020 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? Link to comment Share on other sites More sharing options...
Author Share Posted August 11, 2020 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. 1 1 Link to comment Share on other sites More sharing options...
Share Posted April 14 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now