Incorrect page height displayed in the embedded Facebook browser on iOS 9.x

Question

Incorrect page height displayed in the embedded Facebook browser on iOS 9.x

When trying to access the demo application from core-layout using the embedded browser within the Facebook app on iOS 9.x, it appears that the footer element is not visible in portrait mode. When the device is rotated to landscape mode, the footer becomes partially visible instead of being completely visible as expected.

The first image depicts how the demo app is supposed to appear, while the second image displays the issue of the missing footer when viewed through the Facebook app's embedded web view (the images were captured from a Chrome desktop browser showcasing the bug):

https://i.sstatic.net/Pv4W8.png https://i.sstatic.net/X3NgI.png

After exploring various possibilities, we discovered that the bug stemmed from the browser rendering the page/viewport taller than the visible area.

This problem appeared to be linked to issues discussed in threads such as iOS9 Safari viewport issues, meta not scaling properly? and Web page not getting 100% height in Twitter app on iOS 8.

html ios css facebook embedded-browser

Answer 1

Answer №1

After thorough research and attention to detail, we devised a solution that combined various answers from StackOverflow. It's important to note that implementing only certain changes did not resolve the issue; all modifications outlined below were necessary.

We had to modify the CSS defining the height of the enclosing div element (#outer-wrap) as follows:

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;
}

We added the following function to our library, which is called during 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 needed to be altered to:
```
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">
```
It's crucial to use a scale value of 1.0, not 1, to prevent issues with tools like html-minifier. We resolved the html-minifier problem by encapsulating the viewport meta tag within  comments.

Answer 2

After thorough research and attention to detail, we devised a solution that combined various answers from StackOverflow. It's important to note that implementing only certain changes did not resolve the issue; all modifications outlined below were necessary.

We had to modify the CSS defining the height of the enclosing div element (#outer-wrap) as follows:

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;
}

We added the following function to our library, which is called during 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 needed to be altered to:
```
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">
```
It's crucial to use a scale value of 1.0, not 1, to prevent issues with tools like html-minifier. We resolved the html-minifier problem by encapsulating the viewport meta tag within  comments.

Answer 3

Answer №2

Encountered a similar issue, however, I found that utilizing window.innerHeight resolved it for me rather than using document.body.clientHeight.

Answer 4

Encountered a similar issue, however, I found that utilizing window.innerHeight resolved it for me rather than using document.body.clientHeight.

Answer 5

Answer №3

If you're seeking alternative solutions to Martin's response, consider adjusting your CSS based on detecting the Facebook in-app browser.

The issue I encountered revolved around CSS - specifically, bottom elements being obscured.

function modifyCSSforFbBrowser() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (isFacebookApp(userAgent)) { // Identifying Facebook in-app browser
      $('.bottombar').css('height', '50vh'); // Making CSS adjustment
  }
};

Subsequently:

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

Answer 6

If you're seeking alternative solutions to Martin's response, consider adjusting your CSS based on detecting the Facebook in-app browser.

The issue I encountered revolved around CSS - specifically, bottom elements being obscured.

function modifyCSSforFbBrowser() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (isFacebookApp(userAgent)) { // Identifying Facebook in-app browser
      $('.bottombar').css('height', '50vh'); // Making CSS adjustment
  }
};

Subsequently:

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

Answer 7

Answer №4

In order to understand the issue with the height bug, it is essential to comprehend how the FB in-app browser functions: it undergoes an opening animation where the size of the browser increases from bottom to top. This dynamic causes discrepancies in the calculated height by JavaScript on the initial page load.

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

The calculated height may be inaccurate initially as JavaScript can run during the opening animation while the browser's height is still adjusting.

To resolve this issue, I utilized screen.height as a constant reference point for height calculation.

To identify when the app is opened in the Facebook in-app browser, I implemented a function found 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. A similar issue could arise with width calculations, where using screen.width can offer a solution.

Answer 8

In order to understand the issue with the height bug, it is essential to comprehend how the FB in-app browser functions: it undergoes an opening animation where the size of the browser increases from bottom to top. This dynamic causes discrepancies in the calculated height by JavaScript on the initial page load.

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

The calculated height may be inaccurate initially as JavaScript can run during the opening animation while the browser's height is still adjusting.

To resolve this issue, I utilized screen.height as a constant reference point for height calculation.

To identify when the app is opened in the Facebook in-app browser, I implemented a function found 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. A similar issue could arise with width calculations, where using screen.width can offer a solution.

Incorrect page height displayed in the embedded Facebook browser on iOS 9.x

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

delivering the user's ID and username from php back to the website

Ways to extract information from PayFast

Library of User Interface components for React Native applications

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

Elevate a division within its container

Obtaining a byte array using the file input method

What is the method to extract the content located within the <body> element using requests.get()?

Problem with overlapping numbers in the Vis network

Explore relevant Pill information dynamically based on the image that was clicked in Angular

Clicking on tabs causes their content to mysteriously vanish

Background in CSS ::after pseudo-element not showing up

Tips for safeguarding against the insertion of scripts into input fields

Opera bug causing issues with Bootstrap's :active list item styling

Make sure to place the <i> tag within the <li> tag at the bottom to automatically resize the height

Swap File Field for Picture Graphic - HTML/CSS

Prevent content overlap in Tumblr's sidebars by using CSS positioning techniques

Conceal the toolbar element if it is not at the top of the page

How to Retrieve Content from an iFrame Using jQuery?

Angular: monitoring changes in HTML content within a Component or Directive

Warning: Potential Infinite Loop when using Vue JS Category Filter