Jump to content
GreenSock

ab_

Draggable in iframe on mobile is buggy

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.

 

On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.

 

(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)

In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.

 

Here is a demo: https://unfjl.csb.app/

 

I have tried a lot of different things (css, touchevents etc), but cannot get it to work...

 

What could cause this behaviour?

 

Update (no iframe example)

 

Demo no iframe: https://p5cu9.csb.app/

 

Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...

Link to comment
Share on other sites

Hey ab_ and welcome to the forums.

 

I don't have an iOS device around to test right now, but you could take a look at this thread and see if anything helps. Other than that, I'm sure another user will come around and offer up some advice. Maybe even @GreenSock himself ;) 

 

Link to comment
Share on other sites

This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the <body> of the top-level page (not the iframe)! 

document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});

That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser). 

 

You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):

yourDraggableElement.addEventListener("touchforcechange", function(event) {
  event.preventDefault();
});

Browser bugs are fun, aren't they?! ;)

 

  • Like 2
Link to comment
Share on other sites

@GreenSock thank you very much. This really did the trick. What bothers me most is that I couldn't figure out how to debug this problem. I just wonder how they figured out, that this was causing the issue...

Link to comment
Share on other sites

1 hour ago, ab_ said:

@GreenSock thank you very much. This really did the trick. What bothers me most is that I couldn't figure out how to debug this problem. I just wonder how they figured out, that this was causing the issue...

Glad it helped! Yeah, it's SUPER weird that the solution was to add a touchstart event listener to the <body>. Go figure. Sometimes when I'm troubleshooting and nothing is working, I start throwing stuff at the wall and seeing what sticks. Some browsers require some strange workarounds to get them to cooperate. 

  • Thanks 1
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.
×