[TIMOB-25942] iOS 11: Screen orientation not working in navigation window

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2018-09-27T06:39:37.000+0000
Affected Version/s	n/a
Fix Version/s	Release 7.5.0
Components	iOS
Labels	ios11
Reporter	Mostafizur Rahman
Assignee	Vijay Singh
Created	2018-04-06T13:32:59.000+0000
Updated	2018-10-16T10:01:49.000+0000

Description

Hello, We are seeing a screen orientation problem as windows are being open from a root navigation modal window. *Steps to reproduce:* 1. Open the sample application in [link](https://drive.google.com/file/d/1n6lNK6bDwtQBDekMOAQE4mjoqjZeKpgk/view?usp=sharing) or use the below-provided code. 2. Run the application in an iOS simulator using below code Or 3. Run the sample application in the simulator. 4. Switch the simulator's device orientation to "UPSIDE DOWN" 5. Click on the link on the main app screen labeled "Launch Nav Root Window" 6. Once the window titled "Modal 1" window is opened, then click the "Next" nav button 7. The window titled "Modal 2" should not have the correct orientation. *Test Code:* index.xml

<Alloy>
	<Window class="container" backgroundColor="#666600">
		<Button onClick="launchNavRoot">Launch Nav Root Window</Button>
	</Window>
</Alloy>

*Modal1.xml, Modal3.xml, Modal3.xml, Modal4.xml, Modal5.xml*

//Modal1.xml
<Alloy>
	<NavigationWindow>
		<Window backgroundColor="#808000">
			<RightNavButton>
				<Button title="Next" onClick="onNext"/>
			</RightNavButton>
			
			<View layout="vertical">
				<Label text="MODAL 1"></Label>
				<Label text="MODAL 1"></Label>
				<Label text="MODAL 1"></Label>
				<Label text="MODAL 1"></Label>
			</View>
		</Window>
	</NavigationWindow>
</Alloy>
//Modal2.xml
<Alloy>
	<Window backgroundColor="#999900">
			<RightNavButton>
				<Button title="Next" onClick="onNext"/>
			</RightNavButton>
			
			<View layout="vertical">
				<Label text="MODAL 2"></Label>
				<Label text="MODAL 2"></Label>
				<Label text="MODAL 2"></Label>
				<Label text="MODAL 2"></Label>
			</View>
		</Window>
</Alloy>
//Modal3.xml
<Alloy>
	<Window backgroundColor="#b3b300">
			<RightNavButton>
				<Button title="Next" onClick="onNext"/>
			</RightNavButton>
			<View layout="vertical">
				<Label text="MODAL 3"></Label>
				<Label text="MODAL 3"></Label>
				<Label text="MODAL 3"></Label>
				<Label text="MODAL 3"></Label>
			</View>
		</Window>
</Alloy>
//Modal4.xml
<Alloy>
	<Window backgroundColor="#cccc00">
			<RightNavButton>
				<Button title="Next" onClick="onNext"/>
			</RightNavButton>
			<View layout="vertical">
				<Label text="MODAL 4"></Label>
				<Label text="MODAL 4"></Label>
				<Label text="MODAL 4"></Label>
				<Label text="MODAL 4"></Label>
			</View>
		</Window>
</Alloy>
//Modal5.xml
<Alloy>
	<Window backgroundColor="#e6e600">
		<View layout="vertical">
				<Label text="MODAL 5"></Label>
				<Label text="MODAL 5"></Label>
				<Label text="MODAL 5"></Label>
				<Label text="MODAL 5"></Label>
			</View>
		</Window>
</Alloy>

*Modal1.js, Modal3.js, Modal3.js, Modal4.js, Modal5.js*

//Modal1.js
var args = $.args;
function onNext()
{
	var modal2 = Alloy.createController("Modal2").getView();
	Alloy.Globals.navRoot.openWindow(modal2);
}
//Modal2.js
var args = $.args;
function onNext()
{
	var modal2 = Alloy.createController("Modal2").getView();
	Alloy.Globals.navRoot.openWindow(modal2);
}
//Modal3.js
var args = $.args;
function onNext()
{
	var modal3 = Alloy.createController("Modal3").getView();
	Alloy.Globals.navRoot.openWindow(modal3);
}

//Modal4.js
var args = $.args;
function onNext()
{
	var modal4 = Alloy.createController("Modal4").getView();
	Alloy.Globals.navRoot.openWindow(modal4);
}
//Modal5.js
var args = $.args;
function onNext()
{
	var modal5 = Alloy.createController("Modal5").getView();
	Alloy.Globals.navRoot.openWindow(modal5);
}

tiapp.xml

<ios>
        <enable-launch-screen-storyboard>true</enable-launch-screen-storyboard>
        <use-app-thinning>true</use-app-thinning>
        <plist>
            <dict>
                <key>UISupportedInterfaceOrientations~iphone</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                <key>UISupportedInterfaceOrientations~ipad</key>
                <array>
                    <string>UIInterfaceOrientationPortrait</string>
                    <string>UIInterfaceOrientationPortraitUpsideDown</string>
                    <string>UIInterfaceOrientationLandscapeLeft</string>
                    <string>UIInterfaceOrientationLandscapeRight</string>
                </array>
                <key>UIRequiresPersistentWiFi</key>
                <false/>
                <key>UIPrerenderedIcon</key>
                <false/>
                <key>UIStatusBarHidden</key>
                <false/>
                <key>UIStatusBarStyle</key>
                <string>UIStatusBarStyleDefault</string>
            </dict>
        </plist>
    </ios>

*Test Environment:* Using latest SDK 7.1.0.GA, 7.0.1.GA Latest CLI 7.0.2 The Screen orientation not working in navigation window on iPhone. Thanks

Attachments

File	Date	Size
statusbar_screenshot.png	2018-05-16T07:58:50.000+0000	30198
Step1.png	2018-04-06T13:36:31.000+0000	2783331
Step2.png	2018-04-06T13:34:49.000+0000	719210
Step3.png	2018-04-06T13:34:55.000+0000	1516323
TestNavigationBar.zip	2018-05-16T07:59:23.000+0000	85638

Comments

Hans Knöchel 2018-04-06

There are some weird UI glitches here: * There a two navigation bars, which is invalid * I do not see any reference on modal windows in the code. Usually, modal windows are opened within nav.open({ modal: true}); which requires a new navigation window instance for the modal window It would help to have a classic project to debug, if possible.

Vijay Singh 2018-05-15

Simple Test Case -

   var win2 = Titanium.UI.createWindow({
       backgroundColor: 'red',
       title: 'Red Window'
   });
    
   var win1 = Titanium.UI.iOS.createNavigationWindow({
      window: win2
   });
    
   var win3 = Titanium.UI.createWindow({
       backgroundColor: 'blue',
       title: 'Blue Window',
   });
    
   var button = Titanium.UI.createButton({
       title: 'Open Blue Window'
   });
   button.addEventListener('click', function(){
       win1.openWindow(win3, {animated:true});
   });
    
   win2.add(button);
   var button2 = Titanium.UI.createButton({
       title: 'Open Gray Window'
   });
   button2.addEventListener('click', function(){
   	win1.openWindow(win4, {animated:true});
   });
    
   win3.add(button2);
   win1.open();
    
   var win4 = Titanium.UI.createWindow({
       backgroundColor: 'gray',
       title: 'Gray Window',
   });
    
   var button4 = Titanium.UI.createButton({
       title: 'Close Gray Window'
   });
   win4.add(button4);
    
   button4.addEventListener('click', function(){
       win1.closeWindow(win4, {animated:false}); 
   });

Vijay Singh 2018-05-15

This problem is happening on iOS 11.x. On iOS 10 and 9 it is working fine.
Vijay Singh 2018-05-16

On more investigation I found that there is bug from apple side in iOS 11.x with status bar orientation. Bug is - In UIInterfaceOrientationPortraitUpsideDown, if we push a view controller in navigation controller, status bar moves to bottom of screen. I have attached a "TestNavigationBar.zip", a native app and statusbar_screenshot.png in this ticket. In Titanium orientation handling, we check the status bar orientation and force rotate the screen. As status bar orientation is coming wrong from native side, we rotate the screen. Due to this navigation bar also moves to bottom of screen. I have filed a bug to apple. https://openradar.appspot.com/radar?id=4936322665938944 Once it get fixed from apple side, it will automatically fixed.
Vijay Singh 2018-06-13

PR - https://github.com/appcelerator/titanium_mobile/pull/10104
Vijay Singh 2018-09-12

I verified this issue in iOS 12 beta. The problem does not exist in iOS 12. It is fixed by Apple. Thanks!
Samir Mohammed 2018-10-15

[~vijaysingh] I can see the correct screen orientations but in the description of the ticket at step 7 it says "The window titled "Modal 2" should not have the correct orientation." but the text is still the correct way round?
Vijay Singh 2018-10-16

[~smohammed] 1. Step 7 of ticket means in case of error it should not have correct orientation and with this pr that should be fixed. 2. This problem is only in iOS 11.x. So in iOS >=12 and iOS <=10 this problem is not there with and without fix.

Samir Mohammed 2018-10-16

*Closing ticket.* Fix verified in SDK Version 7.5.0.v20181010051919 correct screen orientations can be seen. *Test Environment*

   APPC Studio: 5.1.0.201808080937
   iPhone 6 Sim (11.3)
   APPC CLI: 7.0.6
   Operating System Name: Mac OS Mojave
   Operating System Version: 10.14
   Node.js Version: 8.9.1
   Xcode 10.0

JSON Source