Ionic-framework: Screen Orientation Bug

Created on 12 Jul 2016  路  11Comments  路  Source: ionic-team/ionic-framework

Short description of the problem:

WebView is resized to incorrect size after orientation change

What behavior are you expecting?

Expected app to cover entire width of the screen, but the web app (i.e. the WebView) is narrower than the complete width

The problem is that once the device is in landscape mode and the app is started. When programmatically setting the orientation to portrait, it _INTERMITTENTLY_ fails

Steps to reproduce:

  • ionic start myApp tabs
  • cd myApp
  • cordova platform add [email protected]
  • cordova plugin add cordova-plugin-screen-orientation
  • vim config.xml # add
<preference name="Orientation" value="all" />
  • vim www/js/app.js # add in the ready callback
screen.lockOrientation('portrait'); 
  • ionic build ios
  • Build and run from Xcode

I ran on iPad mini (iPad2,5) with iOS 9.3

Other information:

Couldn't reproduce the problem with a vanilla Cordova app

Which Ionic Version? 1.3.1

Most helpful comment

I tracked this down. cordova-ios sets autoresizesSubviews to true and the screen orientation plugin presents a view controller after forcing orientation (I'm assuming to solve some corner case). This seems to cause a race condition where two resizes trigger at the same time and we end up with the width incorrectly set. When using the plugin the autoresizesSubviews should be set to false in the app delegate

All 11 comments

Couldn't reproduce after removing the cordova-plugin-splashscreen (installed by default with ionic)

I am also having this issue with an app and it's very urgent that we find a solution since we are approaching a release next month.

Can you please check out this issue for a robust solution?

I tracked this down. cordova-ios sets autoresizesSubviews to true and the screen orientation plugin presents a view controller after forcing orientation (I'm assuming to solve some corner case). This seems to cause a race condition where two resizes trigger at the same time and we end up with the width incorrectly set. When using the plugin the autoresizesSubviews should be set to false in the app delegate

@fmardini what exactly do you mean by app delegate? Would that be the config.xml?

@jyann CDVAppDelegate.m in method didFinishLaunchingWithOptions

Hello all! While this seems to be a cordova bug and not an Ionic bug i will be closing this issue for now. Thanks for using Ionic!

Actually, it's not a Cordova problem. It is a conflict between Cordova and a plugin used by Ionic's project. So it should be fixed by Ionic bundle since the starter app has the problem :)

I see so many unhandled issues in the Ionic framework, where you guys just claim it to not ever be an Ionic issue or it just remains without any feedback or so that I slowly get the impression you just spinned up that project to capitalize on your paid Ionic services (which basically is totally fine, I am not asking anyone to do work for free in my or anyone else interest. But still you are letting down the people who relied on you and took the word out for you. You kinda need to pursue a two-fold strategy right now, I believe).
There are far too many examples out there with services that started out with a free product to gain market size and then stopped bothering about the people using that part, I am sure I don't need to tell you that. Don't become one of these, too.

Pretty sure I need to switch to React Native ASAP...

Hello @lambrospetrou ! Unfortunately even though we do use this plugin in our default starters, we do not actually have any control over the development of that plugin, that is why i said that this was a cordova issue. Sorry that i wasn't clear on that!

Set autoresizesSubviews to "NO" in xcode, in file CDVAppDelegate.m in method didFinishLaunchingWithOptions fix my problem, thanks @fmardini

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings