2

My app consists of a 3-row flexbox column:

<div class="app" style="display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: space-around;">
    <div class="question-header" style="-webkit-flex: 0 0 0;">...</div>
    <div class="question-interactive" style="-webkit-flex: 1 0 0;">...</div>
    <div class="navigation" style="-webkit-flex: 0 0 0;">...</div>
</div>

This setup works well for all desktop and mobile browsers that we target (when we use the correct prefixes, of course), except for a strange bug with safari for ios: when in landscape mode on safari for ios, the navigation bar runs off the page

Portrait is OK
Landscape is Clipped

This doesn't happen on desktop browsers or when in portrait mode. Is this a known bug for safari for ios? Anyone recognize my error? It seems like the navigation div isn't calculating its height correctly from its content... I'd be happy to share additional details/code if it helps narrow down the issue.

dobon
  • 79
  • 4

1 Answers1

1

it turns out that safari for ios has a bottom bar that messes up the innerHeight calculation! Isn't that cool?!

The fix is to dynamically detect that you're on safari for ios (using UserAgent filtering, lmao) and conditionally bump the height of the body to reflect the ACTUAL size of the page:

if ( UserAgent.says.it.is.iOS.Safari ) {
    $('body').css('height', window.innerHeight);
}

The difference in height you need to bump can be found by using the viewport's actual height (window.innerHeight) and subtracting the document's reported clientHeight (document.documentElement.clientHeight).

var delta = document.documentElement.clientHeight - window.innerHeight;

This is the SO that showed me the light: Ipad: window.height() give bad value in Safari but not in Chrome

Community
  • 1
  • 1
dobon
  • 79
  • 4