Wrong viewport/page height in embedded Facebook browser in iOS 9.x

To understand the reason for bug with the height you need to know how FB in-app browser opens: it has animation on opening and browser size is increasing from bottom to top. And that is why on start page height calculated by JS could be incorrect

• window.innerHeight,
• document.documentElement.clientHeight,
• document.body.clientHeight
• element.style.height='100vh'

Height could be less than final page height because JS could be executed during opening animation while browser height is still increasing

I've solved this problem by reaching to screen.height which is always constant

to detect when app is opened in facebook in-app browser I use function from here How to detect Facebook in-app browser?

function isFacebookApp() {
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    return (ua.indexOf('FBAN') > -1) || (ua.indexOf('FBAV') > -1);
}

P.S. same bug could be with width calculation,screen.width will help with it

The solution we came up with was a combination of other answers we found on StackOverflow, while paying strong attention to details. I will stress that implementing just some of the below changes did not fix the bug; all the changes had to be made.

• The CSS defining the height of the wrapping div element (#outer-wrap) had to be changed from

  outer-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  

  to

  html, body, #outer-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }
  

• The following function was added to the library, and is called upon initialization:

  function _fixViewportHeight() {
      var html = document.querySelector('html');
  
      function _onResize(event) {
          html.style.height = window.innerHeight + 'px';
      }
  
      window.addEventListener('resize', _.debounce(_onResize, 125, {
          leading: true,
          maxWait: 250,
          trailing: true
      }));
  
      _onResize();
  }
  
  _fixViewportHeight();
  

• The viewport meta tag had to be

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">
  

  However, the scale values had to be 1.0, not 1; that caused the fix to break in one of our build processes where we applied html-minifier, which replaced the decimal values with integer ones. The html-minifier problem was fixed by surrounding the viewport meta tag with <!-- htmlmin:ignore --> comments.

For those looking for alternatives to Martin's answer, you can also update your CSS when you detect Facebook in-app browser.

My problem was essentially CSS-related : bottom elements were hidden.

function adaptCSSFbBrowser() {
  var ua = navigator.userAgent || navigator.vendor || window.opera;
  if (isFacebookApp(ua)) { // Facebook in-app browser detected
      $('.bottombar').css('height', '50vh'); // Update css
  }
};

And then :

$(document).ready(function() {
  adaptCSSFbBrowser();
  ...

Had the same problem, but all I had to do was use window.innerHeight, instead of document.body.clientHeight.