touchDragging - horizontal Sly 'locks' vertical scrolling

[bogdosarov]

If you pull the page for the slider up or down the page does not scroll. How to make so that the page can scroll when it is pulling the slider?

[darsain]

When you enable touchDragging option, Sly does preventDefault() for every touchstart event to disable scrolling in the direction you are trying to slide the content.

As Sly doesn't know what will be the direction of your swipe beforehand, it disables default actions for both vertical and horizontal dragging.

So right now, it is not possible to do what you are asking for. The workaround might be to disable touchDragging, and add a prev & next buttons, or make page buttons bigger for mobile version.

I'm adding this issue to my to-do list for next version.

[bogdosarov]

Ok. Thanks for the quick reply.

[darsain]

Don't close please. It is an issue that should be fixed in future versions :)

[ghost]

Hi,

Does this bug is fixed now?
This behaviour was corrected on jquery kinetic plugin to allow vertical touch scrolling while having horizontal scroll.
Here the link : davetayls/jquery.kinetic#33 (comment)
I hope this will help.

[darsain]

Can you try it out now guys? Use the development version in src/sly.js. I don't have any device to test it on :)

[bogdosarov]

When I include development version touch drugging does not work. You can see it on this page

[ghost]

With this correction, vertical and horizontal scroll are not working on touch devices. All seems disable...

[darsain]

It "might" work now :) You can test with src/sly.js. But this is my last blind attempt at developing for mobile devices without having any device :)

[gnettles]

the dev version works for me using iOS simulator.

[siggysamson]

I tested the latest version on an iPhone 4 (iOS 6.1.3.) and on an iPad 4 (iOS 6.1.3.) and it worked on both!

[ghost]

Yes it works great.

However I noticed that one time on 5 or 10, Sly seems to don't be initialized on load on touch device (for me on ipad and iphone). So the content can't be dragged...However on desktop PC it always works.

I also notived that one time on 10, links can't be click (on desktop pc) or touch (touch device) when touchdragg is activated...

For touch device users, did you observe these bugs?

[siggysamson]

Are you sure it's not initialized?
I checked it and it always initializes BUT sometimes ("one time on 5 or 10") the transitions/translateX doesn't work.
I have a cycleInterval in my code so I in the in the inspector I can see that the "active" class for the slides changes but the translateX doesn't change. (the "active" class also changes on touchstart/-move)

[ghost]

Yes, you are right, Sly is correctly initialized. But sometimes it doesn't respond to touchmovement. This bug never happen on desktop pc. When translateX doesn t work, if you have a pagination bullets, you can see that the pagination change on touchmove but the content is not translateX.
And do you observed the click touch link problem? Sometimes on desktop pc or on touch device click on links doesn't work when touchdragg is activated...

I hope a solution will be found. It will perfect without this bugs! Sly is very great and so smooth! I tested so much horrible plugin before Sly !

[darsain]

When this happens (Sly doesn't move on mobile devices), can you do some navigating, and check the style property of SLIDEE element?

When Sly detects 2D transforms, it uses transform: translateX/Y(x) to move slidee, and falls backs to position: absolute; left/top: x;, so I'd want to know if any of these styles are present on the SLIDEE. If they are, yet SLIDEE doesn't move, I'm afraid it is a browser bug on that particular device.

Make sure to do some navigating before checking the style property.

[siggysamson]

This is the whole CSS added to the SLIDEE element: -webkit-transform: translateZ(0px); width: 3072px;

I don't have any android devices to check if it's a safari bug only.

[ghost]

I test on ipad and iphone with a lot's of browser and it's the same problem. When translateX doesn't work, if I trigger Sly (sly initialization) again with a button click, everything becomes normal, Sly works after that. But it can't be a solution...

[siggysamson]

Due to apple's restrictions it doesn't matter which browser you use on iOS - it's always the same rendering engine: the webkit/safari engine.

If I got some free time at the weekend I'll try to break down the problem and hopefully find out what's the problem.

[darsain]

@siggysamson I was interested in the style property after you've done some navigating. Like activated a second page or something. Is that it? Because this is the style as it looks like right after Sly initialization, but before you do any navigation.

Also, are there any console errors when this freezing happens?

If Sly correctly updates the active pagination bullet, but slidee doesn't move, it means the internal position handling is happening correctly, but from some reason it is not being rendered. I'm interested whether Sly updates the slidee style property properly, and browser just refuses to render it, or whether the style is not being updated at all.

[siggysamson]

@darsain there aren't any console logs. I did some navigating and I've also let it cycle a bit. It's the correct style property - double-checked it!
So the style property is not being updated at all

[ghost]

And for the click bug? Sometimes, click on links doesn't works after dragging slidee frame...

[darsain]

@lolo34140 I might have an idea what's happening there. I'll look into it when I'll have time.

[ghost]

Ok! Thank you. You are very close to have a perfect Sly!

[darsain]

@lolo34140 just pushed a commit that should hopefully fix that unresponsive click. You can try the src/sly.js.

[ghost]

It seems to correct the click link bug! I don't have time to test it more but I will give you my feedback in two days...

[darsain]

If you guys have more info about the frozen Sly on some mobile devices, please create a separate issue, and leave this one for feedback regarding the actual topic of this issue.

[ghost]

Is there some news about the updating sly problem on touch devices?

By the way, the click on link bug was definitely corrected! Thank you!

[darsain]

@lolo34140 I've noticed incorrect required styles being applied in .init() method when only 2D transforms are supported. I've just pushed a few commits, one of which fixes that. It may solve this issue.

You can try the development version from src/sly.js

[ghost]

The bug is still here but seems to appear less frequently...

[ghost]

Is there some news about the init() problem? It still causes trouble on touch device.

By the way, I tested Sly on a Samsung Galaxy S3 and it's very buggy, very slow. It's not as smooth that on iphone or ipad...

[darsain]

@lolo34140 can you please create a dedicated issue with a detailed description of this bug?

[darsain]

In recent commits I've overhauled the dragging initiation to make it a lot more responsive. This change also includes a lot lowered "path to definite initiation", which is path after which Sly cancels, or completely takes over dragging and disables click caused on touchend. This path is now 5 pixels, and probably needs to be tweaked for touch devices.

What is actually happening: When you touchstart and move, at the point when you've reached pathToLock destination (currently 5 pixels) Sly determines whether you are dragging in the same direction as Sly (horizontal/vertical). If you are, Sly disables next click. If you are not, Sly cancels dragging and lets browser handle all touch events.

Path of 5 pixels might be extremely low on touch devices, as tapping while unintentionally moving a finger a little might actually cause 5px touchmove, so it should be tested. If there is too much of incorrect determinations (click disabled on tapping), it has to be bumped up.

The development version with changes is in src/sly.js.

The pathToLock can be tweaked on line 102.

[ghost]

5px is too low. In principle it's 30px in x axis and not more than 10px in y axis for the threshold.

On ipad 3, Sly is not smooth. It's buggy. I think it comes from the way that the momentum is calculated. After touchend there is a delay to activate the inertia. The momentum calculation need to be operated the most possible during the touchmove...

[darsain]

So, Sly hasn't been locking touch scrolling in direction opposite to a current Sly instance. Also, v1.2.0 landed with dragging/touch re-factoring that is aware of interactive elements. I'm gonna close this one. If there are more issues, feel free to post.

[kylefinley]

@darsain,

I believe there's some regression here -- maybe someone else can confirm.

v2.1.0 works the way that you describe; vertical scrolling is not locked when scrolling.
However v2.2.1 does locks when attempting to scroll vertically when the touch is initiated over a Sly instance.

Again, maybe some one will confirm, but that's the behavior I"m seeing on the iPad and the iPhone simulator in both my own examples and the examples on the site.

Thanks for this excellent software.

Kyle

[darsain]

Try src/sly.js please. Should be fixed.

[kylefinley]

Works Great!

Thanks you for the quick support.

[tankhit]

i have same issue regarding scroll bar, i have update latest code from src/sly.js but don't get output proper