iOS 8 web app screen shrinks after loading camera app

Question

I am in the process a building a web app and ran into a problem with iOS 8. Please note this is specific to iOS 8 as it works fine in previous versions.

I have a page that uploads images taken directly from the phone or tablet. I use the following link to call the camera app:

<input type="file" accept="image/*" capture="camera" name="files[]">

The camera app opens as expected and takes the picture with no problem. However when the camera app closes and returns to the web app the screen height is reduced by more then half. There is no way to correct expect for closing and restarting the app.

You can see how it looks after taking the picture here: Screencast

It appears as if the screen remains in landscape. However rotating the device only makes it worse.

I am assuming this is an iOS 8 bug but wondering if anyone has any ideas on how to correct or work around the issue.

One last note, the issue only occurs when running as a web app. When using safari it works.

FYI - here are the meta tags I am using:

        <!-- Run in full-screen mode. -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-capable" content="yes">

        <!-- Make the status bar black with white text. -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!-- Customize home screen title. -->
        <meta name="apple-mobile-web-app-title" content="DigiSite">

        <!-- Disable phone number detection. -->
        <meta name="format-detection" content="telephone=no">

        <!-- Set viewport. -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <!-- Startup images -->

        <!-- iOS 6 & 7 iPad (retina, portrait) -->
        <link href="http://img.digisite.us/splash.png?w=1536&h=2008&c=<br />
<b>Notice</b>:  Undefined index: background in <b>/home5/digisite/public_html/mobile/mobileHeader.php</b> on line <b>22</b><br />
&n=lumentum"
        media="(device-width: 768px) and (device-height: 1024px)
        and (orientation: portrait)
        and (-webkit-device-pixel-ratio: 2)"
        rel="apple-touch-startup-image">

        <!-- iOS 6 & 7 iPad (retina, landscape) -->
        <link href="http://img.digisite.us/splash.png?w=1496&h=2048&c=&n=lumentum"
        media="(device-width: 768px) and (device-height: 1024px)
        and (orientation: landscape)
        and (-webkit-device-pixel-ratio: 2)"
        rel="apple-touch-startup-image">

        <!-- iOS 6 iPad (portrait) -->
        <link href="http://img.digisite.us/splash.png?w=768&h=1004&c=&n=lumentum"
        media="(device-width: 768px) and (device-height: 1024px)
        and (orientation: portrait)
        and (-webkit-device-pixel-ratio: 1)"
        rel="apple-touch-startup-image">

        <!-- iOS 6 iPad (landscape) -->
        <link href="http://img.digisite.us/splash.png?w=748&h=1024&c=&n=lumentum"
        media="(device-width: 768px) and (device-height: 1024px)
        and (orientation: landscape)
        and (-webkit-device-pixel-ratio: 1)"
        rel="apple-touch-startup-image">

        <!-- iOS 6 & 7 iPhone 5 -->
        <link href="http://img.digisite.us/splash.png?w=640&h=1096&c=&n=lumentum"
        media="(device-width: 320px) and (device-height: 568px)
        and (-webkit-device-pixel-ratio: 2)"
        rel="apple-touch-startup-image">

        <!-- iOS 6 & 7 iPhone (retina) -->
        <link href="http://img.digisite.us/splash.png?w=640&h=920&c=&n=lumentum"
        media="(device-width: 320px) and (device-height: 480px)
        and (-webkit-device-pixel-ratio: 2)"
        rel="apple-touch-startup-image">

Thank you in advanced.

Answer 1

I'm seeing the same issue on iPad 2 running iOS8. It seems to have to do with the orientation you open your app in. If we open the app in portrait(vertical) mode then switch to landscape(horizontal) it works fine. It's only when the app is opened in landscape does the viewport shrink.

I haven't been able to reproduce this issue on iOS7.

Before photo capture:

After photo capture:

Answer 2

Ben, you are absolutely correct this is an iOS 8 bug. I can not determine how to programmatically work around it. If anyone else has any ideas please feel free to share. But there is a way to manually correct.

The problem seems to stem around the camera app not correctly identifying the correct position. On my iPhone, the camera app always opens in portrait mode even if held in landscape position. If you detect this, simply keep rotating the device until it auto corrects the position. It took two tries for me before it corrected itself. Once in the right mode, click on "Use Photo" and everything is fine. So as Ben said, as long as the the web-app and camera app are in the same orientation then all is fine. If they are not your web app view-port will be messed up. Once this occurs, your only recourse is to close the app and try again. One other interesting node, it only happens when running a full-screen app. If run through safari like any normal website there is no problem.

I documented the steps here to make sure what I said above is clear. http://screencast.com/t/1mwIur5Z8 .

I hope this helps out others. Hopefully, Apple will correct this.

Thank you Ben for submitting the defect to Apple!

Answer 3

I have exactly the same problem. I opened a bugreport in the Apple bugtracker on Aug-6 but no one cares :-/
It seems to have something to do with

<meta name="apple-mobile-web-app-status-bar-style" content="black">

If you don't use this tag you have an overlapping status bar, but taking pictures doesn't resize your viewport anymore.

Edit:
Full example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-touch-fullscreen" content="yes">
  </head>
  <body><h1>Test</h1>
    <p>Capture a photo using camera</p>
      <input type="file" capture="camera" accept="image/*">
  </body>
</html>

Answer 4

Apple修复了iOS 8.3 beta 1中的这个错误