[TIMOB-15508] iOS: Windows in tabGroup flicker on first open

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-10-28T18:36:15.000+0000
Affected Version/s	Release 3.1.3
Fix Version/s	2013 Sprint 22, 2013 Sprint 22 API, Release 3.2.0
Components	iOS
Labels	ios, triage
Reporter	Dan Tamas
Assignee	Vishal Duggal
Created	2013-10-16T22:34:00.000+0000
Updated	2013-10-29T10:31:08.000+0000

Description

Hi, Since the 3.1.3.GA I get always a flicker of the windows when they are in a tabgroup and the tab is opened the first time. Like the window doesn't really open, even if the *open* event triggers when the tabGroup opens. sample code:


var tg = Ti.UI.createTabGroup({
	backgroundColor:'black'
});


var ar = ['red','green','orange','yellow'];

for (var i=0; i < ar.length; i++) {
	tg.addTab(Ti.UI.createTab({
		window:Ti.UI.createWindow({
			backgroundColor:ar[i],
			title:ar[i]
		}),
		title:ar[i]
	}))
};


tg.open();

Even in simulator, if you change the tab the first time you will see for a split second the black background. This gets worse when the window is complex and has many components inside. Thank you

Comments

David He 2013-10-19

A lot of people have this issue. It does not happen in 3.1.2 Please get onto this ASAP since it really bad for UX

Vishal Duggal 2013-10-24

Second test case from TIMOB-15473

   Titanium.UI.setBackgroundColor('#000');
    
   var tabGroup = Titanium.UI.createTabGroup();
    
    
   var win1 = Titanium.UI.createWindow({  
       title:'Tab 1',
       backgroundColor:'#fff'
   });
   var tab1 = Titanium.UI.createTab({  
       icon:'KS_nav_views.png',
       title:'Tab 1',
       window:win1
   });
    
   var sectionFruit = Ti.UI.createTableViewSection({ headerTitle: 'Fruit' });
   sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Apples' , backgroundImage:"backgroundNews.png"}));
   sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Bananas' , backgroundImage:"backgroundNews.png"}));
    
   var sectionVeg = Ti.UI.createTableViewSection({ headerTitle: 'Vegetables' });
   sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Carrots' , backgroundImage:"backgroundNews.png"}));
   sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Potatoes' , backgroundImage:"backgroundNews.png"}));
    
   var sectionFish = Ti.UI.createTableViewSection({ headerTitle: 'Fish' });
   sectionFish.add(Ti.UI.createTableViewRow({ title: 'Cod' , backgroundImage:"backgroundNews.png"}));
   sectionFish.add(Ti.UI.createTableViewRow({ title: 'Haddock' , backgroundImage:"backgroundNews.png"}));
    
   var table = Ti.UI.createTableView({
     data: [sectionFruit, sectionVeg, sectionFish]
   });
    
   win1.add(table);
    
   var win2 = Titanium.UI.createWindow({  
       title:'Tab 2',
       backgroundColor:'#fff'
   });
   var tab2 = Titanium.UI.createTab({  
       icon:'KS_nav_ui.png',
       title:'Tab 2',
       window:win2
   });
    
   var sectionFruit2 = Ti.UI.createTableViewSection({ headerTitle: 'Fruit' });
   sectionFruit2.add(Ti.UI.createTableViewRow({ title: 'Apples' , backgroundImage:"backgroundNews.png"}));
   sectionFruit2.add(Ti.UI.createTableViewRow({ title: 'Bananas' , backgroundImage:"backgroundNews.png"}));
    
   var sectionVeg2 = Ti.UI.createTableViewSection({ headerTitle: 'Vegetables' });
   sectionVeg2.add(Ti.UI.createTableViewRow({ title: 'Carrots' , backgroundImage:"backgroundNews.png"}));
   sectionVeg2.add(Ti.UI.createTableViewRow({ title: 'Potatoes' , backgroundImage:"backgroundNews.png"}));
    
   var sectionFish2 = Ti.UI.createTableViewSection({ headerTitle: 'Fish' });
   sectionFish2.add(Ti.UI.createTableViewRow({ title: 'Cod' , backgroundImage:"backgroundNews.png"}));
   sectionFish2.add(Ti.UI.createTableViewRow({ title: 'Haddock' , backgroundImage:"backgroundNews.png"}));
    
   var table = Ti.UI.createTableView({
     data: [sectionFruit2, sectionVeg2, sectionFish2]
   });
    
   win2.add(table);
    
   var win3 = Titanium.UI.createWindow({  
       title:'Tab 3',
       backgroundColor:'#fff'
   });
   var tab3 = Titanium.UI.createTab({  
       icon:'KS_nav_ui.png',
       title:'Tab 3',
       window:win3
   });
    
   var sectionFruit3 = Ti.UI.createTableViewSection({ headerTitle: 'Fruit' });
   sectionFruit3.add(Ti.UI.createTableViewRow({ title: 'Apples' , backgroundImage:"backgroundNews.png"}));
   sectionFruit3.add(Ti.UI.createTableViewRow({ title: 'Bananas' , backgroundImage:"backgroundNews.png"}));
    
   var sectionVeg3 = Ti.UI.createTableViewSection({ headerTitle: 'Vegetables' });
   sectionVeg3.add(Ti.UI.createTableViewRow({ title: 'Carrots' , backgroundImage:"backgroundNews.png"}));
   sectionVeg3.add(Ti.UI.createTableViewRow({ title: 'Potatoes' , backgroundImage:"backgroundNews.png"}));
    
   var sectionFish3 = Ti.UI.createTableViewSection({ headerTitle: 'Fish' });
   sectionFish3.add(Ti.UI.createTableViewRow({ title: 'Cod' , backgroundImage:"backgroundNews.png"}));
   sectionFish3.add(Ti.UI.createTableViewRow({ title: 'Haddock' , backgroundImage:"backgroundNews.png"}));
    
   var table = Ti.UI.createTableView({
     data: [sectionFruit3, sectionVeg3, sectionFish3]
   });
    
   win3.add(table);
    
   tabGroup.addTab(tab1);  
   tabGroup.addTab(tab2);  
   tabGroup.addTab(tab3);
    
    
   tabGroup.open();

Vishal Duggal 2013-10-24

Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/4846
Paras Mishra 2013-10-29

Changing the tabs does not flicker any more. Issue is reproducible for sdk: 3.1.3.GA. Verified the fix and hence closing the issue. Environment used: Device : iPad 3, iOS version: 7 Device : iPad mini, iOS version: 6 SDK: 3.2.0.v20131028222444 CLI version : 3.2.0 OS : MAC OSX 10.8.4 Alloy : 1.2.2 Appcelerator Studio, build: 3.2.0.201310280656 XCode : 5

JSON Source