Sencha Touch - Lag at screen transition - model-view-controller

Question

Allright, I'm testing the Sencha Touch framework wrapped in Phonegap and compiled to a HTC Desire with Android 2.2. The purpose of this application is just to get familiar with the Framework and it's (in)capabilities.
I'm using the MVC model. The application consists of a list of items that are loaded into a data store from a json file using a proxy. When one of those items is clicked, a detail page is shown.
app.views.viewport.setActiveItem(app.views.placesList, options.animation);
But before the transition, there is some kind of lag, and a white screen is shown for a very small amount of time. I made a vid to make it more clear:
http://www.youtube.com/watch?v=uW8hspMKqfc
The code below shows the structure and functionality of my application:
Model
app.models.Place = Ext.regModel("app.models.Place", {
fields: [
{name: "name", type: "string"},
{name: "location", type: "string"}
]
});
app.stores.places = new Ext.data.Store({
model: "app.models.Place",
proxy: {
type: 'ajax',
url : 'js/app/data/products.json',
reader: {
type: 'json',
root: 'products'
}
}
});
View
app.views.PlacesList = Ext.extend(Ext.Panel, {
fullscreen: true,
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
title: 'PlacesList'
}],
items: [{
xtype: 'list',
store: app.stores.places,
itemTpl: '{name}',
onItemDisclosure: function () {
Ext.dispatch({
controller: app.controllers.places,
action: 'show'
});
}
}],
initComponent: function() {
app.stores.places.load();
app.views.PlacesList.superclass.initComponent.apply(this, arguments);
}
});
Controller
app.controllers.places = new Ext.Controller({
show: function(options) {
app.views.viewport.setActiveItem(app.views.placeDetail, options.animation);
},
back: function(options) {
app.views.viewport.setActiveItem(app.views.placesList, options.animation);
}
});
I'm wondering if the experienced lag is just something that comes with Sencha Touch, or comes from the code.
Thanks in advance,
Gerard

Answer 1

Credit Steffen Hiller for this answer: This bug appears for all transitions that set the opacity in CSS, which the slide animation in Sencha Touch does. Credits go to the interesting Performance tips for device page."

Answer 2

To clarify previous answers:
If you use the slide animation just for your panels within a card layout (e.g. via Ext.TabPanel), just add the following CSS/SCSS code and all will be fine.
.x-panel {
-webkit-backface-visibility: hidden;
}
I'm using Sencha Touch 1.0.1a and PhoneGap 0.9.4.
Credit for this goes to Steffen Hiller for hist post here: http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html