Current transition in not stopping on tap on android devices

[baryshev]

With useTransition option momentum scrolling looks much more smoothly. But on android devices we can't stop current transition by tapping on the scrollable container until it plays momentum transition. This behaviour is reduces user experience on android devices.

This behavior looks like an android WebView bug, because current transition is not stopping if we change transition properties like transition time = 0. But in some situations current transition stops normally. For example: in long list we start a momentum scrolling with a huge distance. While momentum scrolling (transition) is in progress we can start new momentum scrolling (tap - move - release) in the reverse direction. And it starts immediately. So, that means that technically we can stop transition in progress on android WebView.

I'm trying to resolve this bug, but have no success for now. There is interesting SO answer, that provides solution (hack) for this bug: http://stackoverflow.com/questions/15484242/unable-to-stop-css3-transition-of-transform-by-translate3d

[cubiq]

a workaround is already in place, if it doesn't work for you I need to know your device/os and complete userAgent.

[baryshev]

I'm still getting this bug on both my android devices: Samsung Galaxy ACE II (Android 4.1.2) and Alcatel 8008D (Android 4.2.1). This bug repeats only in default android browser and WebView component in Cordova. Google Chrome for Android works fine on both devices. This bug repeats for me here http://lab.cubiq.org/iscroll5/demos/simple/

[cubiq]

some Android devices are not affected, I tried to do some spoofing but it's impossible to foresee all scenarios. the best you can do is calling iScroll with preventDefault:false

[baryshev]

preventDefault:false solves the problem, but now i see the new one. With this option looks like that IScroll duplicate some events. Scroll speed doen't match finger speed. It`s 2x faster. So, if i move my finger from bottom to top at scrollable area, IScroll scrolling around 2 screens. Also it takes effect to momenum scrolling, it 2x faster too.

[cubiq]

are you using jquery/jquery mobile? I suggest to set tap:true and use the custom 'tap' event.

[baryshev]

I'm using jquery 2.0.3 and hammer.js in my project. 'tap:true' take no effect. I'm tried to test at clear copy http://lab.cubiq.org/iscroll5/demos/simple/ In this case 'preventDefault:false' isn't work. I'm confused now. Now i'm trying to get momentum scrolling (first problem) works as well at clear copy, without side libs to understand the problem.

[cubiq]

use tap:true and listen to 'tap' custom event (instead of 'click' or whatever).

[baryshev]

2x scrolling speed affected by overflow : auto on the scrollable div. overflow : hidden solves this. But preventDefault:false take no effect now. I'm at the start point again. Sorry, but i don't understand what you mean about listening of tap event.

[cubiq]

this must be related to your current config. try to post a demo somewhere. You may also find help on https://groups.google.com/forum/#!forum/iscroll

[baryshev]

Now i'm talking about empty demo http://lab.cubiq.org/iscroll5/demos/simple/ , not about my own config. I created a video that illustrates difference between android default browser and google chrome for android.

http://www.youtube.com/watch?v=KXQBVqbfYqM

I'm tried to debug this error.
When i release my finger after fast moving momentum scrolling was started line 569
cssText looks like this: -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-duration: 1331.0476744186049ms; -webkit-transform: translate(0px, -3083px) translateZ(0px);
We have 1.3s animation here to position -3083px.

Then if i tap on scrollable div until transition ends (earler than 1.3s), _start function takes control. At line 376 we are setting transition time to 0. In this place this.isInTransition is true and we are executing a condition at line 382. After that condition cssText of scrolling element looks like this: -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-duration: 0ms; -webkit-transform: translate(0px, -1582px) translateZ(0px);

So looks like the code works as well, and css have a right properties. After my tap -webkit-transform sets to translate(0px, -1582px) and -webkit-transition-duration to 0ms. So, the current transition must be stopped at -1582px. But this is not happening. I see the full transition to -3083px and after that scroll jumps to -1582px (without animation) after next move.

[cubiq]

video link seems broken.

[baryshev]

Sorry, i updated the link. http://www.youtube.com/watch?v=KXQBVqbfYqM

[cubiq]

I'll check this out but I can't replicate on my Galaxy S2 and preventDefault:false, which means that it's OS or Device dependent (making debug pretty difficult)

[baryshev]

I just created a fiddle that isolates the problem. In google chrome for android animation stops after 1 second as expected. But in default android browser transition continue playing. cssText changed normally in both cases.

[cubiq]

maybe it doesn't simply support 3d matrix. what's the result of console.log(matrix)?

[baryshev]

I updated the fiddle. This is what i see in log in my android browser:

-webkit-transition: 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate(56.22189712524414px, 0px) translateZ(0px);
matrix(1.000000, 0.000000, 0.000000, 1.000000, 56.221897, 0.000000)

Same result for the both devices (android 4.1.2 and android 4.2.1).

Matrix works fine.

Google shows several similar questions:

http://stackoverflow.com/questions/15484242/unable-to-stop-css3-transition-of-transform-by-translate3d
https://code.google.com/p/android/issues/detail?id=53361

[baryshev]

I found the solution that solves the problem.

On affected devices changing transition duration to 0ms not stops the current transition, but we can set very small duration that takes effect. I added this hack into 384 and 1289 lines, and it works for me: this._transitionTime(0.001);

baryshev@9d0ef97#build/iscroll.js

[cubiq]

can you try with '0s' or '0'?

[baryshev]

I'm already tried it. Only positive values stops current transition on both my android devices.

[cubiq]

I have to try on all other devices before setting a 0.001 value. Anyway great find!

[baryshev]

Of course it need to be under condition to not affect devices without this bug.

[iamkeir]

This fix works for me, too. Will it be pulled into core?

[jasewhatson]

Worked for me also on Android 4.1.2 (Galaxy S3)

However it does add a jitter when you start to scroll