Ionic 5.x/Screen-Orientation lock does not work on iOS platform

[cmeuser]

Bug Report

Problem

Unable to lock the screen orientation on iOS using the latest version of the ionic framework and the plugin.

What is expected to happen?

I'm expecting that both the splash screen and my sign-in page is locked into portrait mode on both iOS and Android.

What does actually happen?

When the app is launched, and the iOS device is in landscape, the splash screen and sign-in page are displayed in landscape.

Information

• issue observed only on iOS
• issue observed only on iOS 13.3.1

Command or Code

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

constructor(
.
.
.
private screenOrientation: ScreenOrientation,
.
.
.
) {
.
.
.
this.platform.ready().then(() => {
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
});
}

Environment, Platform, Device

iOS 13.3.1
iPhone XS Max

Version information

Ionic:

Ionic CLI : 5.4.5
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 11 other plugins)

Utility:

cordova-res : not installed
native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (/Users/meusercx/Library/Android/sdk)
ios-deploy : 1.9.2
ios-sim : 8.0.2
NodeJS : v10.15.1 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504

---

package.json...
"@ionic-native/screen-orientation": "^5.23.0",
"cordova-plugin-screen-orientation": "3.0.2",

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[timbru31]

Is your plugin actually installed?

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Please also test the issue without Ionic and use the window.screen object instead.

[timbru31]

Besides that, affected iOS devices and versions are missing in your issue.

[cmeuser]

I've updated the Environment, Platform, and Device section of the bug report as well as the Version Information. I just ran the same app as reported, which uses Ionic 5, on my iPhone 6 Plus/iOS 12.4.6 and did NOT observe the issue. Additionally, I ran the production version of the app, which is built using Ionic 4, on my iPhone XS Max/iOS 13.3.1 and observed the same issue reported here but did NOT observe the issue on my iPhone 6 Plus/iOS 12.4.6. This appears to be an issue related to iOS 13.x.

[bfan1256]

I've seen a similar problem...

[chilupa]

I'm experiencing the same problem.

[pandaiolo]

Same here

Cordova 9, ios 13.4, Xcode 11.4

In devtools, screen.orientation is undefined

[bcrigler]

Does not work here either:

Xcode 11.4.1
Ipad Pro - IOS 13.4.1 (actual device)
"@ionic/angular": "^4.11.5",
"@capacitor/core": "^1.5.1",
"@capacitor/ios": "^1.5.1",
"@ionic-native/screen-orientation": "^5.26.0",
"cordova-plugin-screen-orientation": "^3.0.2"

Although, this same configuration works fine for my iPhone 8+ running IOS 13.4.1. I used window.screen and the Ionic way as well.

Both ways lead to -> Native Cordova -> CDVOrientation screenOrientation INVALID ["options": [3, portrait]]

[timbru31]

Please see #59 - could it be that you have split screen enabled?

[timbru31]

From my knowledge and reading of the affected devices this seems a lot like #59, since only iPads and iPhone Max devices seem affected.

[bcrigler]

So for my issue... @timbru31 you pointed me in the correct direction. My app does require full screen and I did not have that set. Once I set that option now the screen orientation locks as expected. I piggybacked off this thread though, and that does not seem to be the case of the original poster. Just to add some info. In the iPhone 11 Pro Max simulator running IOS 13.4.1 I do not see this issue BUT... I'm using Ionic 4.x so 5.x could be different.

[ahollandusc]

I had the same problem with the orientation lock working on iphones but not ipad.
To fix it so I could lock in portrait mode only on both device types:

Edit the generate ios project's Info.plist file and under the keys UISupportedInterfaceOrientations & UISupportedInterfaceOrientations~ipad I removed all but the option for portrait ending up with

<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>

[gitlizm1981]

i had the same issue, it seems the plugin is still not loaded at the time the app component already start to initialize, my current workaround solution is to add below code to delay the app component loading process:

if(this.platform.is('ios'){
const startTime = new Date().getTime() + parseInt('3000', 10);
while(new Date().getTime() < startTime) {};
}

call the screenOrientation operations here..

[wzr1337]

Came across this post while looking for a solution the same problem..

by looking into the logs, I realized I missed to call:

ionic cordova plugin add cordova-plugin-screen-orientation

[ammarhaiderbjss]

Came across this post while looking for a solution the same problem..

by looking into the logs, I realized I missed to call:

ionic cordova plugin add cordova-plugin-screen-orientation

This only applies to pre-capacitor versions of Ionic

[bastifix]

i had the same issue, it seems the plugin is still not loaded at the time the app component already start to initialize, my current workaround solution is to add below code to delay the app component loading process:

if(this.platform.is('ios'){
const startTime = new Date().getTime() + parseInt('3000', 10);
while(new Date().getTime() < startTime) {};
}

call the screenOrientation operations here..

Didn't work here. Is there another solution?