I’m creating a pretty standard mobile slideOut menu in a meteor/cordova app for Android. I installed the crosswalk package, and saw a fantastic lift in UI performance, except with the touchmove events I’m using for the menu and other sliding panels. Heres the code for the touch events.
(nb I moved from blaze events to loading this in the onRendered callback to try improve performance even more).
/* Touch Events - Nav */
var el = document.getElementById('appnavigation');
var touchPos;
var start = function(event) {
var touch = event.touches[0] ||
event.changedTouches[0];
touchPos = touch.clientX;
el.style.transition = 'transform 0.08s';
};
var end = function(event) {
var touch = event.touches[0] ||
event.changedTouches[0];
var pos = el.getBoundingClientRect().left;
if (Math.abs(pos) > 160) {
App.Util.toggleVisible('nav');
}
el.style.transition = '';
el.style.transform = '';
};
var move = function(event) {
var touch = event.touches[0] ||
event.changedTouches[0];
var x = Math.abs(touch.clientX - touchPos);
if (touch.clientX > 0 && x > 0) {
el.style.transform = 'translate3d(-' + x + 'px, 0, 0)';
}
};
// attach event listeners
el.addEventListener('touchstart', start, false);
el.addEventListener('touchend', end, false);
el.addEventListener('touchcancel', end, false);
el.addEventListener('touchmove', move, false);
This works but becomes sporadically laggy on mobile, any help would be great.