This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Flip Sos
Posted Aug 08 - Read on Facebook

I found a little, very annoying problem.

As soon as you have scrollable layer that contains objects, these objects are not draggable ob the phone anymore. I think the problem lays in the way iOS handles touch input. The touch is "used" for scrolling the main
layer and not the actual objects within it.

Here's an example with main.scrollVertical = true

https://dl.dropboxusercontent.com/u/3142787/draggableBug.framer/index.html

An here without
https://dl.dropboxusercontent.com/u/3142787/noBug.framer/index.html

They both (of course) work fine on desktop but not on mobile.

Any workaround?

4 Comments

Koen Bok

I think there was a problem with touch/iOS8 if I recall correctly.

Flip Sos

I'm on iOS7 though. I mean it kind of makes sense unfortunately that it doesn't work. Oddly enough. I think there are similar issues with Jquery-Draggable. And this works for fixing the jquery draggable issues: http://touchpunch.furf.com/

But what about Framer? Any ideas?

Flip Sos

I did another prototype. You can see that on the phone the dragend event on the object gets called properly. (The click event is ignored though). If you just set a click event it works absolutely fine but dragging won't get recognized somehow.

https://dl.dropboxusercontent.com/u/3142787/draggableBug2.framer/index.html

Flip Sos

Ok, found a workaround. Instead of setting the container to scrollable=true you can set it to draggable=true instead. Then you turn on clipping and increase the size according to the content within the container. Finally you add some friction to emulate iOS scroll-behavior. Not perfect but it does the job.

Read the entire post on Facebook