Landscape mode view height issue

I’m having an issue, currently tested on iPhone and iPad iOS 7.0+, where when either device is rotated into landscape mode the height is set to the width. It appears that the height and width are a box. For instance, inspecting the DOM on the iPad shows height and width both set to 1024px. Rotating the device back to portrait correctly changes the width to 768px and the height remains the same.

I’ve stripped out all code and am left with a barebones HTML page with nothing more then text and it still happens. I’ve narrowed the issue down to the ionic.js file. If I comment out that file, the page renders correctly in landscape mode. I’m not even injecting ionic into my angular app. I assume this has something to do with the ionic scrolling overrides but haven’t been able to narrow down the root cause.

Has anyone come across this problem? I’m not sure where to go from here?

Here is the HTML head



MiSACWIS Mobile

<!-- ionic css  -->
<link href="lib/css/ionic.css" rel="stylesheet">
<link href="lib/css/animate.css" rel="stylesheet">

<!-- your app's css -->
<link href="css/app.css" rel="stylesheet">

<!-- angularjs scripts -->
<script src="lib/js/ionic.js"></script>
<script src="lib/js/angular/angular.js"></script>
<script src="lib/js/angular/angular-animate.js"></script>
<script src="lib/js/angular/angular-sanitize.js"></script>
<script src="lib/js/angular/angular-touch.js"></script>
<script src="lib/js/angular/angular-mocks.js"></script>
<script src="lib/js/angular-ui/angular-ui-router.js"></script>
<script src="lib/js/ionic-angular.js"></script>

And the Body

<div>
    Testing
</div>

This is something that was done in beta 3, but we are coming out with a corrected version of for beta 4.

Can you try to reference the nightly js and see if it resolved?

<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

Yes, that fixed the issue. Thank you for the reply.

Hey guys, I’m still facing this issue with beta 4. Should I use the nightly build or has this fix been included in beta 4?

When I rotate to landscape, everything is fine but when I rotate back to portrait, the width is equal to that of the landscape version.

The end result looks like a rotated landscape version shown in portrait mode. There will be a black area of about 20% at the bottom while the contents of the app are too wide for the screen, enabling horizontal scrolling.

I’m on an ipad 2 with ios 6.1.2

Hmm this should have been taken care of in beta 4. Can you try the nightly builds? Also, can you remote inspect you app from safari and see what the actual viewport setting is being set to?

I think this is the same problem (using beta6 of ionic). When rotating back from landscape to portrait, the width and height doesn’t respond correctly as seen on this screenshot:

In the worst case scenario I would like to block rotation, can that be done somehow?

Interesting, I haven’t had this issue on my app on iPad. I’ll see if I can get this using the nightly builds.

Anyways, yes you can prevent rotation, but it means having to open up Xcode and do it from there.

Hi.

I have the same issue as jorre.
I’m develloping 2 applications (beta 8) with 2 different Ipads ( Ipad 3 with IOS 6.1.3 and Ipad 2 with IOS 7.1 ).

In IOS 7.1 ( Ipad 2 ) the application rotates perfectly for both applications.

But, in IOS 6.1.3 ( Ipad 3 ) the black stripe appears.
Here are some screenshots for illustration :

When i launch the application ( portrait ) everything is ok.

1rst rotate, everything fine too.

After the 2nd rotate, the webview keeps the dimensions of the landscape view. Consequently, allowing for an horizontal scroll and revealing a black stripe. ( the stripe is not described in the HTML inspector)

From then on, whatever I do the view keeps the landscape dimension and the black stripe stays at the bottom.

This issue appears in both applications but only for IOS 6.1.3. The width and height don’t adjust like jorre says.

Don’t hesitate to ask me for more precisions if you need any.

What does your viewport look like?

Try this one.

<meta name="viewport" content="initial-scale=1, user-scalable=no">

here my viewport :
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

I try with <meta name="viewport" content="initial-scale=1, user-scalable=no"> but i get the same issue

Hey sorry for the delay, I was on vacation for a few days.

So first off, I’m pretty sure we are dropping support for iOS 6 all together. Apple requires all apps that are built for iOS 7

https://developer.apple.com/news/index.php?id=12172013a#top

So your issue shouldn’t be a problem since apple is require ios 7 be the new minimum version

Hi!
I have checked your link and Apple didn’t drop the IOS 6 support yet. We are forced to build for IOS 7 but still need to support IOS 6.

As long as IOS 6 is supported by Apple, we will need to support it ourselves for our clients.

Is there any ways to fix or hack for this issue ?

This is still an issue for us in iOS7 and iOS8 on the iPad - see photos at the bottom of this thread… We’ve set the app’s device orientation to portrait in Deployment Info, and our viewport tag reads <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">. I’ve tried every viewport configuration mentioned in this thread and that I can find on Stack Overflow, all to no avail.

I’ve also tried various Objective-C fixes, as my hunch is that the webview itself isn’t being resized to fit its container? The look and feel of it is that, when the orientation changes to landscape, the webview retains the width and height of it’s previous dimensions but is then shoved into a portrait container.
Running v1.0.0-beta.13, and did give nightly a shot but no change. Any help would be greatly appreciated!

Looking good on my iPad Mini 2 (iOS 8) in portrait mode.

I’ve killed the app, then reopened it in landscape mode:

TL;DR - Why the black spacing at the bottom?

EDIT: Can confirm that this issue is present in the Ionic blank starter template with zero alterations:

Portrait on iPad Mini 2 iOS 8:

Same after restarting in landscape:

2 Likes

I’m running into a similar problem with landscape (on the iPhone). I’m running my app inside the Safari browser. Everything is fine in portrait but when I switch to landscape, the page is shifted up. After testing on multiple devices this bug only appears in iOS 7.1+ (tested with 7.1.1 and 7.1.2). On an iPhone with 7.0.4 it works fine. I also discovered that the bug only appears inside Safari - if I launch as a web app, it works fine in all iOS versions. I’m also using v1.0.0-Beta 13.

I was running into the same problem (only on iPad with iOS 8). I was able to get rid of it by updating to latest versions of cordova and ionic.

Hi ionic Team,

I am also facing the same problem. How can i solve it and idea?

Thanks,
Madan

Anyone managed to resolve this?
I’m having the same issue on the latest nightlies.
This is my view-port: