CODEWITHSUNDEEP
javascriptperformancecordovameteorcrosswalk
bigmadwolf
bigmadwolf

Reputation: 3519

crossWalk cordova touchmove performance issues on Android

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.

/* 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, any help would be great.

Upvotes: 0

Views: 271

Answers (1)

bigmadwolf
bigmadwolf

Reputation: 3519

Ok ok, beaten by my own hack. When I was doing this initially, I was using jQuery, and to smooth things out needed the very fast transition. When moving to crosswalk though this actually makes the movement terrible and laggy, thus the solution is above, in the touchstart handler, to set transition to none.

Thats it.

Upvotes: 1

Related Questions