Problem description
When creating a ScrollableView in a MobileWeb project, the scrolling between views is really laggy and slow, if the views have a background image set.
Steps to reproduce
- create an app with the code below
- make sure you put 3 images p1.png, p2.png, p3.png in the images folder
- run in the browser
var win = Ti.UI.createWindow({
width:1024,
height:768,
top:0,left:0,
backgroundColor:'#bbb'
});
var views_ar = [];
for (var it=1; it<=3; it++){
var _view = Ti.UI.createView({left:0,width:1024,top:0,height:768, backgroundImage:'images/p'+ it +'.png'});
views_ar.push(_view);
}
var sv_sections = Ti.UI.createScrollableView({
left:0, width:1024, top:0, height:768,cacheSize:3, name:'Scrollable', views: views_ar
});
win.add(sv_sections);
win.open();
Expected result
Moving between views is smooth.
We will need some more information from the customer: 1) What version of the SDK are they using 2) The images they are using or, if they cannot supply the images, all of the details of the images (compression algorithm, color type, depth, dimensions, file size, etc) 3) The device/browser and version they are running the app on
1)2.1.0.GA 2)http://cpansearch.perl.org/src/LBROCARD/Image-Imlib2-Thumbnail-0.34/t/1024x768.png 3)tested on iPad simulator
sorry answer for 3) is tested on firefox browser 13.0.1 (for mac)
You may also see the app here http://lamp.t-c.gr/mag/
I did some testing and Safari and Chrome scrolls the view very smoothly, and Firefox 14 is smooth as well but with some tearing. Unfortunately 2.1.0 GA already contains all of the performance improvements we can do on our end. The actual scrolling of the image is handled by the browser, meaning that any performance problems remaining are caused by the browser itself. The attached image is very large, and the web isn't known for handling large images quickly. I would recommend trying to go with a smaller image. That image would most likely be to large to see all at once on a mobile device anyway. You can also try upgrading to Firefox 14, or switching to Safari/Chrome, both of which should be faster.
Tried it both with Chrome and Safari and it seems smoother indeed. however in all browsers there is an irritating flicker when scrolling from one image to another. Do you see this yourself? If you can eliminate it, the experience will be decent.
I have seen it on rare occasions. It's good to know that others are seeing it too and I'm not just going crazy :). I filed TIMOB-10014 to address the flickering issue.