Landscape orientation renders as portrait in ios app

[donovantc]

OpenUI5 version: 1.34.8

Browser/version (+device/version): iOS 9.2 with Cordova 6.0.0

Any other tested browsers/devices(OK/FAIL): iOS 8.2 with Cordova 5.4.0 and Cordova 6.0.0 - the issue remains

Summary: I have implemented an ios hybrid app with openui5 and cordova that only supports the landscape orientation (defined in the xcode build configuration as well as in the cordova config file as a preference). Upon starting the app in landscape mode and rotating it 180 degrees (still landscape), the openui5 app renders the split view in portrait mode (master is hidden with the standard 3 lines button showing) but maintains the dimension of landscape (i.e. full screen). Upon rotating the device 180 degrees back (still in landscape) the openui5 app renders in landscape mode correctly and from then on, always renders correctly in landscape mode.

I have attached an event handler as follows:

sap.ui.Device.orientation.attachHandler(function(oEvent){ console.log(window.orientation); console.log(oEvent); }, this);

and as output on the console, according to steps above: first rotate (180 degrees): 90 {landscape: false} second rotate (180 degrees): -90 {landscape: true}

third rotate (180 degrees): 90 {landscape: true}

from then on, when the window.orientation is 90 or -90, landscape is always true which is correct but the initial rotate is incorrect.

Any other information? (attach screenshot if possible): As far as I can tell, there are no other plugins installed or cordova settings that I have configured which are causing this issue.

[Michadelic]

Hello donovantc,

I am really sorry for the late reply, forgot to send my former reply when i flagged the issue. Can you provide the container archive so that we can test and debug the behavior? Thre are many ways to package an app with cordova and we will have a hard time to reproduce the issue otherwise.

There is also a jsbin example that outputs all the device settings. Can you run it with the container archive and send us the output? http://jsbin.com/gagolaralu/

Thank you and kind regards, Michael

PS: putting this ticket to author action until needed data to reproduce is provided

[donovantc]

Hi Michael,

I have created a new cordova project with the same cordova container setup as the project which produces the error. Essentially, the config.xml file and plugins are the same but the rest of the webapp content I removed (for privacy reasons) and added the code from the jsbin example you sent me. You can clone the project from my github:

https://github.com/donovantc/testdevicesettings.git

The iOS app is already generated, so you can just run in on your iOS device and obtain the results from the jsbin script. I guess that will be the easiest way for you to test and debug?

Do you still need me to run this app on my device and send you the results? I think that if it is a bug, you will probably pick it up when you test the app on your side.

Best regards, Donovan

[clemai]

Hi Donovan,

could you please run the container archive and send us the output. This would help us finding the issue a lot.

Furthermore could you also test your app with a native event (window.orientation) like you did with the UI5 orientation event. Maybe there are events not propagated correctly.

Best regards Clemens

[donovantc]

Hi Clemens,

I ran the container archive, first with window.orientation -90 and the output shows landscape as true (see screenshot1), which is correct. Then I rotated the device to window.orientation 90 and the output shows landscape as false (see screenshot2), which is not correct. Then I rotated it again to -90 and landscape was true and then again to 90 and this time landscape was true (see screenshot3), which is correct. So the incorrect lanscape value only occurs by the first rotation.

Just some additional information. The iOS build is set to allow only landscape (left and right), which is what I require. So when I rotate the device to portrait, the window.orientation remains -90 or 90 (depending on what it was before), which in my opinion is correct since portrait mode is not enabled.

Hope that helps.

Best regards, Donovan

screenshot1 screenshot2 screenshot3

[clemai]

Hi Donovan,

I've tested the orientation change on a tablet device with IOS 9.3. The landscape orientation is correctly recognized in safari, chrome, webview and SAP Fiori Client after each orientation change event. The SAP Fiori Client works also with the cordova plugin.

You said, that you deactivated portrait mode in your build. Could you activate portrait mode and change the orientation ? Maybe the issue is generated through too many events in a short time period.

Could you also please update your IOS version and have another try ?

Best regards, Clemens

[donovantc]

Hi Clemens,

I finally managed to update my iOS version to iOS 9.3 yet I still have the same issue. Did you test you orientation change with portrait mode deactivated? When I activate portrait mode, then the orientation change functions correctly. However, for this particular project, it is required that portrait mode be deactivated.

Could you let me know if the orientation change worked for you with portrait mode deactivated?

Thanks and best regards, Donovan

[clemai]

Hi Donovan,

I've tested the orientation change with your test project https://github.com/donovantc/testdevicesettings.git . I used phonegap to serve the app to my device.

What you mean exactly with portrait mode deactivated ? I was able to change to portrait mode with the ios app you've build in the test project. Furthermore I wasn´t able to reproduce the issue.

Best regards, Clemens

[donovantc]

Hi Clemens,

thanks for the response.

I guess with phonegap, you might not be able to configure the build target properties exactly as I have. In cordova terms, I added a platform (iOS) and opened the iOS Project in XCode, and there is an option to uncheck portrait mode (see Screenshot) to restrict the app from being rendered in portrait mode. Can you perhaps replicate this with the phonegap build (maybe with the parameter )? Since I haven't used phonegap to build and serve the app, I can't guarantee that this will reproduce the issue.

The issue is that I restrict the user to only using the app in landscape mode (thereby deactivating portrait mode completely as described above) and on the first rotation from landscape to landscape (i.e. turn the device upside down), the UI5 Framework doesn't register the correct orientation, it thinks it is in portrait mode (see screenshots in early messages) and hence hides the master view. Thereafter, the Framework registers the orientation correctly, so it only occurs on the first rotation.

To reproduce:

1. Build the testdevicesettings app with the restriction to landscape only
2. Run the app with the device already in landscape mode
3. Click on "Detect Device Settings" and observe the parameter "landscape" (should be true and it is)
4. Rotate the device 180 degree
5. Click on "Detect Device Settings" and observe the parameter "landscape" (should also be true but it is false)

Let me know if there is anything more I can do to assist.

Best regards, Donovan

[clemai]

Hi Donovan,

I've reproduced and debugged your issue with the XCode simulator. The issue occurs through the following circumstances:

1. The main view of your test app is editable. Therefore a screen keyboard can be displayed.
2. The keyboard is loaded by the OS, after the UI5 part was rendered. The initial height of the app is 768px and keyboard needs 20px to display.
3. If you rotate your device an orientation change and resize event is fired. If you rotate your device the first time the device API recognizes that only the height (new height 748), but not the width was changed. So the device API interprets the event as resize event through keyboard display.
4. The event processing through the display of the keyboard is special, because we want to prevent wrong orientation changes in that case. In your iOS app with deactivated landscape mode the handling doesn't work properly.

I think that I can fix this bug next week. I've already tested a easy solution to this. But I can not say if the fix will be available in your UI5 version. But I think that you can also use an easy workaround/hack to prevent the portrait mode. For example you can override the initial value for the orientation support (sap.ui.Device.support.orientation = false), after UI5 was loaded completely.

Best regards Clemens

[donovantc]

Hi Clemens,

Thank you for the explanation. I built the work around into our app and so far, I can confirm that the work around solves this issue.

I will keep an eye on updates to the framework and update in the app once this fix has been built in.

Best regards, Donovan