[TIMOB-17619] iOS: The view flickers on orientation change when its container has a layout property

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2015-02-06T18:01:09.000+0000
Affected Version/s	Release 3.4.0
Fix Version/s	Release 4.0.0
Components	iOS
Labels	qe-3.4.0, regression
Reporter	Satyam Sekhri
Assignee	Vishal Duggal
Created	2014-09-04T11:51:31.000+0000
Updated	2015-03-05T17:57:49.000+0000

Description

The view flickers on device orientation change when the container window / view has a layout property. The flicker does not show on first orientation change but then on flickers on each change in orientation. This is a Regression as the views did not flicker with SDK 3.3.0.GA Steps to Reproduce: 1. Create an app with code below and launch it on a device 2. Change the orientation of the device more than once. Actual Result: The blue view can be seen flickering and it shows the white background behind whenever the device orientation is changed. Expected Result: The views should not flicker.

var win = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff',
    layout:'horizontal'
});

var view = Ti.UI.createView({
	width : 100,
	height : 200,
	backgroundColor : 'blue'
});
win.add(view);

var view2 = Ti.UI.createLabel({
	width : Ti.UI.FILL,
	height : 200,
	backgroundColor : 'green',
	textAlign : 'right',
	text : 'TEST'
});
win.add(view2);

win.open();

Comments

Olga Romero 2014-09-04

Looks like it its an iOS8 issue, I can confirm this bug with Mac osx 10.9.4 Maverics Appcelerator Studio, build: 3.4.0.201409032106 Titanium SDK, build: 3.4.0.v20140903121714 acs@1.0.16 alloy@1.5.0-dev (git://github.com/appcelerator/alloy.git#28af71f2e10ca61929443277176323ec8746ee14) install@0.1.7 npm@1.4.23 sudo@1.0.3 titanium@3.4.0-dev (git://github.com/appcelerator/titanium.git#be6d7a682c881e42246a2d31caac931b5f694024) titanium-code-processor@1.1.1 Xcode6-Beta7 Devices: iPhone 5S iOS 8.05b iPad Air iOS 8.05b Tested the above code on iPhone5c iOS7.1 for regression.
Ingo Muschenetz 2014-09-12

The root cause is the same as that reported in TIMOB-17394. iOS8 animations are additive. Our layout engine on iOS does a layout pass a few times each time correcting the position and size of the view (when layout is non-absolute). On rotation the whole system relays out with animation. I would expect the animations to finish and be removed from the layer once iOS lays out its subviews but they are not removed. So we are seeing this issue from the second rotation onwards. We can, of course, override this behavior and force remove all animations but that might have unintended side effects. Moving this to 3.4.1.
Vishal Duggal 2015-01-27

Pull pending master - https://github.com/appcelerator/titanium_mobile/pull/6604

Vishal Duggal 2015-01-27

Expanded test case

   var win = Titanium.UI.createWindow({  
       title:'Tab 1',
       backgroundColor:'#fff',
       layout:'horizontal',
       orientationModes:[1,2,3,4]
   });
    
   var view = Ti.UI.createView({
       width : 100,
       left:10,right:10,
       height : 200,
       backgroundColor : 'blue'
   });
   win.add(view);
    
   var view2 = Ti.UI.createLabel({
       width : Ti.UI.FILL,
       left:10,right:10,
       height : 200,
       backgroundColor : 'green',
       textAlign : 'right',
       text : 'TEST'
   });
   win.add(view2);
   
   win.addEventListener('postlayout', function(e){
       Ti.API.info('postlayout')
   });
    
   win.open();

Eric Wieber 2015-03-05

Verified fixed, using: Titanium SDK 4.0.0.v20150303161012 Studio 4.0.0.201502171827 CLI 3.4.2-rc4 Xcode 6.2b5 I do not see any flickering in either test case.

JSON Source