Building v1.0 with 'touch' and using android 4.1.2 causes performance issues?
Closed this issue · 2 comments
There's a bug in my project's code: some android phones have problems scrolling on all pages of the web app. Basically the native browser and chrome both freeze (meaning scrolling stops and becomes unresponsive) at intervals when the user scrolls up and down the page.
This problem doesn't happen on:
- iphone
- desktop browsers, and
- and possibly versions earlier than Android 4.0 (did not see with an 2.3.3 phone)
I went back through my project's commit history and found the offending commit was when we upgraded our version of zepto from 1.0rc to v1.0. The upgrade was to get swipe events to work properly on Android without another third party lib, but apparently it also causes the freeze problem.
I originally built zepto off the v1.0 tag with the following modules:
MODULES="polyfill zepto event detect fx ajax form fx_methods assets data selector touch"
If I exclude the 'touch' module, the problem goes away, but then of course swipe events don't work. The freeze problem occurs when the touch module is included even if I don't explicitly bind any touch events in my entire codebase. Am I using this module correctly, or is this a bug with the touch module, or neither?
Thanks,
- Daniel
Notes
Specific phone used when testing:
Galaxy S3 (SPH-L710) - Android 4.1.2
Other third party libs in my codebase:
- requirejs
- backbone
- handlebars
- underscore
- q (http://github.com/kriskowal/q/)
The touch module causes issues on iPhone as well when you have elements with horizontal scrolling on the page.
When I got quickly through the code I realised the scrolling prevention happens due to the 'e.preventDefault()' in the 'touchmove' event:
.bind('touchmove', function(e){
cancelLongTap()
touch.x2 = e.touches[0].pageX
touch.y2 = e.touches[0].pageY
if (Math.abs(touch.x1 - touch.x2) > 10) {
e.preventDefault()
}
})
Removing this check on the swipe movement distance solves the problem.
.bind('touchmove', function(e){
cancelLongTap()
touch.x2 = e.touches[0].pageX
touch.y2 = e.touches[0].pageY
})
Like this any movement will be considered a swipe, removing the 10 pixels threshold and re-enabling the natural swiping on the screen.
Again, I saw this problem on iOS and haven't tested yet on Android, so maybe it doesn't solve your issue. But it's still worth a try I guess.
The code that prevented default events in touchmove
was removed after v1.0, so I'm closing this ticket.
Please feel free to open a new ticket if this is still an issue with master
.