June 29, 2010

JQTouch Animation Flicker Bug Fix

I've been working with the jQTouch (a jQuery plugin for mobile development that imitates much of iPhone's UI and animation features) for quite some time now at work. It's pretty great, but I've been running into small little glitches like animation flickering for 'slide' animations that do not have fantastic documentation.

There's no official patch/solution yet, but I've found a quick code hack that will fix some of the flickering problems. (For the iPhone/simulators I've tested on, at least). Taken from the Google Code issue tracker, just enter in this code snippet (the code marked //HACK) into the appropriate places in your jQTouch.js file.

...
scrollTo(0, 0);

// HACK
var backwardsSign = (backwards ? '-' : '')
var toStart = 'translateX(' + backwardsSign + window.innerWidth + 'px)';
fromPage.css( 'webkitTransform', toStart );
// /HACK

// Define callback to run after animation completes
var callback = function(event){
  // HACK
  fromPage.css( 'webkitTransform', '');
  // /HACK
  ...

As one other person noted, you might also want to wrap these statements in if statements so it doesn't affect other types of animations, like so:

// HACK
if (animation.name === "slide") {
  var backwardsSign = (backwards ? '-' : '')
  var toStart = 'translateX(' + backwardsSign + window.innerWidth + 'px)';
  fromPage.css('webkitTransform', toStart);
}
// /HACK

...

// HACK
if (animation.name === "slide") {
  fromPage.css('webkitTransform', '');
}
// /HACK