iOS 7 and 8 find workaround(s) for having a robust 100% height viewport

AdrianVasiliu commented 10 years ago

With an app using LinearLayout to get a fixed header and footer, loading it on iOS 7 or 8 on iPhone directly in landscape the layout is incorrect. Depending on the case, either the footer, or the header are invisible or only partially visible.

Example on iPhone 5S iOS 7.1.2 (similar behavior with other versions, see below) with deliteful/demos/mobileapp/app.html from current master or from 0.4.0 with 240cab3d46abc5304a98d14514ae07971bf3ea4c applied (otherwise the demo is broken):

On this device/OS, the layout gets repaired by turning to portrait then back to landscape (thanks to the fact Safari switches to full screen):

Remarks:

A similar issue affects for instance ibm-js/deliteful/blob/master/tests/functional/ScrollableContainer-full-screen.htm (which also uses LinearLayout).
The changes included in the https://github.com/dmandrioli/deliteful/commit/3c07cc4ea47f7bba827c0c56399b4ec41519e5ab POC (in the context of #270) do not seem to help for this issue.
The issue hurts on landscape, not on portrait.
Hurts on various iPhone, but not on iPad (seems related with Safari's full-screen or semi-full-screen modes).
Reproduced on:
- iPhone 5S iOS 7.1.2
- iPhone 5S iOS 8.0.2
- iPhone 5S iOS 8.1
- iPhone 6 iOS 8.1
- iPhone 6+ iOS
A difference exists between the different iphones. On all but one device, the layout gets repaired by truning to portrait then back to landscape (because Safari switches to full-screen while doing so). The exception is iPhone 6+ iOS 8.0.2, where turning the device does NOT repair the layout (probably due to the fact Safari does not switches to full-screen on iPhone 6+ - from this point of view it behaves like an iPad, but on iPad the LinearLayout issue doesn't hurt while on iPhone 6+ it does hurt.)

dmandrioli commented 10 years ago

I don't think it's related to LinearLayout. Safari on iOS 7 and next versions has weird height viewport management. iOS7.1 introduced minimal-ui, maybe it can help: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html But minimal-ui is not supported in iOS8... https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-8.0/

Example: this very simple page loaded in landscape on iPad iOS7.1.1 is larger than full screen.

<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no, minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link rel="stylesheet" href="../../delite/themes/defaultapp.css">
    <style>
        div {
            width: 100%;
            height: 100%;
            border: solid 30px red;
        }
    </style>
</head>
<body>
<div>FULL SCREEN</div>
</body>
</html>

AdrianVasiliu commented 10 years ago

Example: this very simple page loaded in landscape on iPad iOS7.1.1 is larger than full screen.

But this page doesn't show-up full-screen on FF or Chrome / Win7 either. However, if I add to your page CSS as in defaultapp.css:

* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

then it works indeed in most browsers, while it reproduces the layout issue in landscape on iPhone 6 iOS 8.1. So indeed it is not related with flexbox layout - and this probably explains a comparable issue hurting dojox/mobile on iOS 7 and 8. Still, we might need to search for a solution/workaround, if any exists...

dmandrioli commented 10 years ago

However, if I add to your page CSS as in defaultapp.css:

Well, it was already there :-)

AdrianVasiliu commented 10 years ago

Indeed ;-) Sorry, I've run it from a directory where the relative path didn't match, and didn't notice it was already there.

That said, the pain of the issue remains... (It might NOT hurt with Cordova, I'll test.)

AdrianVasiliu commented 10 years ago

It might NOT hurt with Cordova, I'll test.

I confirm it does not hurt in Cordova (tested with Cordova 3.5 on iPhone 5S iOS 8.1).

ibm-js / deliteful

iOS 7 and 8 find workaround(s) for having a robust 100% height viewport #383