[TIMOB-15204] iOS7: Contents flash during refresh of TableViewRow

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2014-08-18T08:08:48.000+0000
Affected Version/s	n/a
Fix Version/s	2013 Sprint 19, 2013 Sprint 19 API, Release 3.1.4, Release 3.2.0
Components	iOS
Labels	ios7, module_tableviewrow, qe-manualtest
Reporter	nicolomonili
Assignee	Vishal Duggal
Created	2013-09-13T15:18:54.000+0000
Updated	2014-08-18T08:08:48.000+0000

Description

When there is a refresh of the contents of a row of TableViewRow, the contents of the row "flashes", practically it is understood that the contents of the row was updated (I have a function that updates every few seconds the content of tableviewrow)

Attachments

File	Date	Size
video.mov	2013-09-13T15:18:54.000+0000	281469

Comments

Ingo Muschenetz 2013-09-16

[~vduggal], thoughts?
Vishal Duggal 2013-09-16

Probably related to TIMOB-14888 which itself is a side effect of the bug fix for TIMOB-13434. Essentially the tableView row when re-rendered explicitly detaches from superview and then re-attaches which is what is causing the flash. Some code to reproduce the problem would be nice, though I doubt we could fix it without reintroducing the bug.
Ingo Muschenetz 2013-09-16

[~nicolomonili] Can you provide a test case?

nicolomonili 2013-09-16

I was able to recreate the problem outside of my app, here is the sample code (miss background images but it does not matter)

   
   var mydata = [];
   
   var row1;
   var row2;
   var row3;
   var row4;
   var row5;
   var row6;
   var row7;
   var row8;
   
   var label1 = Ti.UI.createLabel({
       text : 'Abilitato',
       left : 25,
       top : 15,
       font : {
           fontSize : 19
       },
       color : 'white'
   });
   
   var label2 = Ti.UI.createLabel({
       text : 'Uscita 1',
       left : 25,
       top : 40,
       font : {
           fontSize : 19
       },
       color : 'white'
   });
   
   var attivo_inattivo = Ti.UI.createView({
       backgroundImage : '/images/weektimer/circle-red.png',
       left : 130,
       top : 45,
       width : 18,
       height : 18
   
   });
   
   var label3 = Ti.UI.createLabel({
       text : 'Uscita 2',
       left : 185,
       top : 40,
       font : {
           fontSize : 19
       },
       color : 'white'
   });
   
   var attivo_inattivo2 = Ti.UI.createView({
       backgroundImage : '/images/weektimer/circle-red.png',
       left : 290,
       top : 45,
       width : 18,
       height : 18
   
   });
   
   var attiva_disattiva = Titanium.UI.createSwitch({
       value : false,
       right : 10
   });
   
   row1 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE,
       backgroundImage : "/images/weektimer/sfondoRow.png",
       selectedBackgroundImage : "/images/weektimer/clicked.png"
   });
   
   var lunedi = Ti.UI.createLabel({
       text : 'Lunedi',
       top : 5,
       left : 25,
       font : {
   
           fontSize : 19
       },
       color : 'white'
   });
   
   var orariLunedi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
   
           fontSize : 17
       }
   });
   
   var attivaLunedi = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
   
   row2 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
       backgroundImage : "/images/weektimer/sfondoRow.png",
       selectedBackgroundImage : "/images/weektimer/clicked.png"
   });
   
   var martedi = Ti.UI.createLabel({
       text : 'Martedi',
       top : 5,
       left : 25,
       font : {
   
           fontSize : 19
       },
       color : 'white'
   });
   
   var orariMartedi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
   
           fontSize : 17
       }
   });
   
   var attivaMartedi = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
   
   row3 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
       backgroundImage : "/images/weektimer/sfondoRow.png",
       selectedBackgroundImage : "/images/weektimer/clicked.png"
   });
   
   var mercoledi = Ti.UI.createLabel({
       text : 'Mercoledi',
       top : 5,
       left : 25,
       font : {
   
           fontSize : 19
       },
       color : 'white'
   });
   
   var orariMercoledi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
   
           fontSize : 17
       }
   });
   
   var attivaMercoledi = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
   
   row4 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
       backgroundImage : "/images/weektimer/sfondoRow.png",
       selectedBackgroundImage : "/images/weektimer/clicked.png"
   });
   
   var giovedi = Ti.UI.createLabel({
       text : 'Giovedi',
       top : 5,
       left : 25,
       font : {
   
           fontSize : 19
       },
       color : 'white'
   });
   
   var orariGiovedi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
   
           fontSize : 17
       }
   });
   
   var attivaGiovedi = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
   
   row5 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
       backgroundImage : "/images/weektimer/sfondoRow.png",
       selectedBackgroundImage : "/images/weektimer/clicked.png"
   });
   
   var venerdi = Ti.UI.createLabel({
       text : 'Venerdi',
       top : 5,
       left : 25,
       font : {
   
           fontSize : 19
       },
       color : 'white'
   });
   
   var orariVenerdi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
   
           fontSize : 17
       }
   });
   
   var attivaVenerdi = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
   
   row6 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
       backgroundImage : "/images/weektimer/sfondoRow.png",
       selectedBackgroundImage : "/images/weektimer/clicked.png"
   });
   
   var sabato = Ti.UI.createLabel({
       text : 'Sabato',
       top : 5,
       left : 25,
       font : {
   
           fontSize : 19
       },
       color : 'white'
   });
   
   var orariSabato = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
   
           fontSize : 17
       }
   });
   
   var attivaSabato = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
   
   row7 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
       backgroundImage : "/images/weektimer/sfondoRow.png",
       selectedBackgroundImage : "/images/weektimer/clicked.png"
   });
   
   var domenica = Ti.UI.createLabel({
       text : 'Domenica',
       top : 5,
       left : 25,
       font : {
   
           fontSize : 19
       },
       color : 'white'
   });
   
   var orariDomenica = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
   
           fontSize : 17
       }
   });
   
   var attivaDomenica = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
   
   row8 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
       //backgroundImage : "/images/weektimer/sfondoRow.png",
       selectedBackgroundImage : "/images/weektimer/clicked.png"
   });
   
   row1.add(label1);
   row1.add(label2);
   row1.add(label3);
   row1.add(attivo_inattivo2);
   row1.add(attivo_inattivo);
   row1.add(attiva_disattiva);
   //row1.className = 'myData';
   mydata[0] = row1;
   
   row2.add(lunedi);
   row2.add(orariLunedi);
   row2.add(attivaLunedi);
   //row2.className = 'myData';
   mydata[1] = row2;
   
   row3.add(martedi);
   row3.add(orariMartedi);
   row3.add(attivaMartedi);
   //row3.className = 'myData';
   mydata[2] = row3;
   
   row4.add(mercoledi);
   row4.add(orariMercoledi);
   row4.add(attivaMercoledi);
   //row4.className = 'myData';
   mydata[3] = row4;
   
   row5.add(giovedi);
   row5.add(orariGiovedi);
   row5.add(attivaGiovedi);
   //row5.className = 'myData';
   mydata[4] = row5;
   
   row6.add(venerdi);
   row6.add(orariVenerdi);
   row6.add(attivaVenerdi);
   //row6.className = 'myData';
   mydata[5] = row6;
   
   row7.add(sabato);
   row7.add(orariSabato);
   row7.add(attivaSabato);
   //row7.className = 'myData';
   mydata[6] = row7;
   
   row8.add(domenica);
   row8.add(orariDomenica);
   row8.add(attivaDomenica);
   //row8.className = 'myData';
   mydata[7] = row8;
   
   var table = Ti.UI.createTableView({
       width : 320,
       data : mydata,
       backgroundColor:'black'
   });
   
   
   
   setInterval(function(e){
      refresh(); 
   },500);
   
   
   var c = true;
   function refresh()
   {
       
       if(c){
           c = false;
           attivaLunedi.value = true;
           orariLunedi.text = "jjjj";
           orariMartedi.text = "jjjj";
           orariDomenica.text = "jjjj";
           orariGiovedi.text = "jjjj";
           orariSabato.text = "jjjj";
       }else{
           c = true;
           attivaLunedi.value = false;
           orariLunedi.text = "yyyyy";
           orariMartedi.text = "yyyyy";
           orariDomenica.text = "yyyyy";
           orariGiovedi.text = "yyyyy";
           orariSabato.text = "yyyyy";
       }
       
       
   }

Federico Casali 2013-09-16

Here is a revised and runnable version of the provided code. The blinking is more visible if run on device, lowering the setInterval timeout (lines 164-166) and having multiple items being updated at the same time - i.e. adding only one row being updated (commenting out lines 80 and 151) the blink seems to be less evident.

   var win = Ti.UI.createWindow({
       top:20
   });
   
   var mydata = [];
   
   // First Row
   var lunedi = Ti.UI.createLabel({
       text : 'Lunedi',
       top : 5,
       left : 25,
       font : {
           fontSize : 19
       },
       color : 'white'
   });
    
   var orariLunedi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
           fontSize : 17
       }
   });
    
   var attivaLunedi = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
    
   var row1 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
   });
   
   row1.add(lunedi);
   row1.add(orariLunedi);
   row1.add(attivaLunedi);
   mydata.push(row1);
   
   
   // Second Row 
   var martedi = Ti.UI.createLabel({
       text : 'Martedi',
       top : 5,
       left : 25,
       font : {
    
           fontSize : 19
       },
       color : 'white'
   });
    
   var orariMartedi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
    
           fontSize : 17
       }
   });
    
   var attivaMartedi = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
    
   var row2 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
   });
   
   row2.add(martedi);
   row2.add(orariMartedi);
   row2.add(attivaMartedi);
   mydata.push(row2);
   
   // Third Row
    
   var mercoledi = Ti.UI.createLabel({
       text : 'Mercoledi',
       top : 5,
       left : 25,
       font : {
    
           fontSize : 19
       },
       color : 'white'
   });
    
   var orariMercoledi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
           fontSize : 17
       }
   });
    
   var attivaMercoledi = Ti.UI.createSwitch({
       value : false,
       right : 10
   });
    
   var row3 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
   });
   
   row3.add(mercoledi);
   row3.add(orariMercoledi);
   row3.add(attivaMercoledi);
   mydata.push(row3);
   
   
   // Fourth Row
    
   var giovedi = Ti.UI.createLabel({
       text : 'Giovedi',
       top : 5,
       left : 25,
       font : {
    
           fontSize : 19
       },
       color : 'white'
   });
    
   var orariGiovedi = Ti.UI.createLabel({
       text : '00 : 00 - 00 : 00\n00 : 00 - 00 : 00',
       left : 25,
       top : 27,
       color : 'white',
       font : {
           fontSize : 17
       }
   });
    
   var row4 = Ti.UI.createTableViewRow({
       height : '78dp',
       selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.GRAY,
   });
    
   row4.add(giovedi);
   row4.add(orariGiovedi);
   mydata.push(row4);
    
   
   // Defining table and populating it with the mydata array row items
   var table = Ti.UI.createTableView({
       // width : 320,
       data : mydata,
       backgroundColor:'black'
   });
   
   // Setting the interval 
   setInterval(function(e){
      refresh(); 
   },400);
    
    
   var c = true;
   function refresh()
   {
        
       if(c){
           c = false;
           attivaLunedi.value = true;
           orariLunedi.text = "jjjj";
           orariMartedi.text = "jjjj";
           // orariDomenica.text = "jjjj";
           orariGiovedi.text = "jjjj";
           // orariSabato.text = "jjjj";
       }else{
           c = true;
           attivaLunedi.value = false;
           orariLunedi.text = "yyyyy";
           orariMartedi.text = "yyyyy";
           // orariDomenica.text = "yyyyy";
           orariGiovedi.text = "yyyyy";
           // orariSabato.text = "yyyyy";
       }   
   }
   
   win.add(table);
   
   win.open();

nicolomonili 2013-09-18

did not find any solution to this problem?
Ingo Muschenetz 2013-09-18

[~nicolomonili] We have not yet found a solution for the problem. We will revisit it for the next release.
nicolomonili 2013-09-21

I saw that the status of the ticket has been set to: Resolved this means that the next SDK 3.2.0 will include this bugfixes?
nicolomonili 2013-09-27

now in the "Fix Version/s" has been added the SDK 3.1.4, this means that the fix will be fixed in that version?
Ingo Muschenetz 2013-09-27

[~nicolomonili] It is already available from the "Continuous Integration" build page. We may not officially release a 3.1.4 version and only have it available on nightly builds.
Wilson Luu 2013-10-21

Closing bug as fixed. Verified using Federico's test case and setting the timeout to 100 ms, that the contents in the TableViewRow does not flash. Tested on: Titanium Studio, build: 3.2.0.201310181940 OS: Mac OS X Mountain Lion (10.8.5) SDK build: 3.2.0.v20131018154951 Ti CLI: 3.2.0 (72f7426b4ee6c2d2883c666d5b7e03906a16012f) Devices: iphone 4s (6.0.1), iphone 5 (7.0.2)

JSON Source