Jump to content
Search Community

Fullscreen slider vertical touch buttons problem

Synapsus IT AB test
Moderator Tag

Recommended Posts

Hi all!

 

So I really enjoy gsap and I've been working on a vertical fullscreen website based on Craigs codepen: 

 

So on desktop it all works fine, but I've found a mobile specific bug where if a user drags the draggable and then tries to click a button, the actions will be ignored.

In this pen,  (Chrome on Android), if I drag to the bottom I can't click the "Follow @Craig" button, but if I get to the bottom via the arrows, the button works.

 

Now I've found a solution in adding "dragClickables: false," to the draggable object, but now you need to press once outside the button after you are done dragging, otherwise the button is still unclickable.

 

So a "hacky" patch I found to that is to programatically add a fake click right after a drag, in the specific codepen I added it to the slideAnim function under line 86 after the "dragger" check.

container.dispatchEvent(new PointerEvent("pointerdown"));

 

So this fixes it, but I'm very curious about the underlying problem. 

Thanks for your interest :)

See the Pen MzWzyv by PointC (@PointC) on CodePen

Edited by Synapsus IT AB
Link to comment
Share on other sites

Okay, who broke my pen? ;)

 

There is something amiss here. I can reproduce the problem on my iPad in Safari, but Chrome is fine.

 

I ripped out a few pieces from the big demo and made a quick little 3 panel version.

 

See the Pen ZEWqLVK by PointC (@PointC) on CodePen

 

Setting dragClickables: false does indeed work, but I'm almost certain it was fine when I first made this pen. Though that was a long time ago so...

 

I'm seeing another weird thing on CodePen. If I click my Follow on Twitter link in the editor view, it's blocked in Chrome and Edge. FF is fine. The only way I can get that link to work is from Debug View. I'm talking about desktop too here. Can anyone confirm that for me?

4Yqge87.jpg

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...