Webkit touch delay

[davcevski]

Hey guys,

I used this plugin to make scroll-snap website. I have my panels (< li > elements 100% width and height), trough which I scroll with this plugin.

This work perfectly, except when using Touch event (Macbook touchpad or Magic Mouse). This happens only on webkit, and its possibly a webkit bug, or a way of working.

However I am stuck with this few days and it seems like a simple problem.

The problem is:

When I try to scroll down or up I have a delay for about 300-400ms and the whole website goes up or down (like you try to scroll a page that doesn't have a scroll). After that delay the snapping occurs. This is coming from overflow:hidden, I know it, but I couldn't fix it.

Btw it works perfectly when trying to scroll with regular Mouse wheel (on chrome too), or when in Firefox (both touch and mousewheel).

To illustrate this (cause I can't send a link I am developing locally), here is a printshoot of what happens when I try to scroll (before it snaps to the next panel < li >)

[darsain]

The problem is caused by this line:

dragging.pathToInit = isSlidee ? isTouch ? 50 : 10 : 0;

Sly will take over all dragging events only after you drag a certain path, which is 10px when mouse-initiated, 50px when touch-initiated, and immediate when dragging a scrollbar (regardless of the input).

This allows me to disable click events when I'm sure user wants to drag, check the direction of dragg...

Writing this gave me an idea on how to overhaul dragging initiation that should be way more responsive, and not cause issues like yours. I hope it won't fuck with click events on touch devices.

I'll get to it when I'll have some time.

[davcevski]

Thanks about your reply.

Just so you know, that happens on MacBook pro when using touchpad and magic mouse. However, it functions well on dirty old Macbook (2007). My guess here is that the new touchpads are more responsive, the delta goes with few decimals.

Also, strange, but it works on Firefox. So the problem is only in webkit.

[darsain]

I guess that's the elastic bounds effect, which is not present in Firefox?

Anyway, the commit above contains more responsive dragging initiation. Grab the development version from src/sly.js and test it.

[davcevski]

Thanks for the replies,

I tried the commit, and it seems its working better.

The only thing that bothers me now, is that when I try to scroll on Apple's touch, it fires too much events, and it goes very fast. I tried limiting this with a setting and clearing timers, but then I am back to the old problem, delays :).

Maybe don't have a plan of integrating it, but can you recommend me some way of thinking at least, how to fire only one event on touch with your script?

[darsain]

That is a separate issue, and a lot more complicated: #67

The issue is that trackpads are doing a high precision scrolling, which triggeres a lot of events, and is almost imposible to normalize across all devices/browsers because they are all firing the same type of events, but with a different frequency and different meaning. Normally events tell you the distance to scroll, but trackpads are telling you the scrolling velocity, and you can't differentiate between the two. It is all described in the issue linked above.

I eventually went with optimizing/normalizing scrolling for the biggest majority of environments, which is not MackBooks with trackpads, which now suffer from super fast scrolling.

With browsers slowly implementing the new wheel event I'll eventually be able to revisit and fix this.

[darsain]

The issue from #67 has been addressed in last commit. Try the newest src/sly.js.

I've set up a quick test page for it here: http://jsbin.com/InAlUh/1

[darsain]

Gonna close this issue, as it's solved. Let the scrolling be tracked in #67