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

When opening the demo application from core-layout with the embedded browser in the Facebook app on iOS 9.x (at least), the footer element is not visible when the device is in portrait mode. If you rotate the device to landscape mode, the footer will be partially visible. However, the footer (with a button) should be completely visible.

The first image shows how the demo app should look, while the second image shows how the demo app is missing the footer when viewed with the Facebook app's embedded web view (the images were grabbed from a Chrome desktop browser illustrating how the bug is manifested):

After testing a lot of different hypotheses, we concluded that the bug was caused by the browser making the page/viewport higher than the visible area.

This bug seemed related to iOS9 Safari viewport issues, meta not scaling properly? and Web page not getting 100% height in Twitter app on iOS 8.

Viewport height is wrong in Facebook's embedded browser in iOS 9 , The footer in the demo is not visible when opened as a link inside the Facebook app on iOS 9.x. 14 Wrong viewport/page height in embedded Facebook browser in iOS 9.x Feb 15 '16. 11 Wrong viewport/page height in embedded Facebook browser in iOS 9.x Feb 15 '16.

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

Responsive iframes on iOS do not size correctly (workaround , Observe how the embed is sized incorrectly, and you can actually scroll the screen shot 2017-08-30 at 9 10 54 am .amp-active { iframe { height: 0; max- height: 100%; max-width: 100%; Fix sizing of responsive iframes on iOS # 11134 viewport is equal to the document's size, not the viewport's size. Wrong viewport/page height in embedded Facebook browser in iOS 9.x Creating a headless Chrome instance in Python Offscreen & embeddable browsers comparison(for use in a game)

Making Embedded Content Work In A Responsive iFrame , In this article, we'll show you **how to make embedded content such as video and calendars resize with the browser's viewport. The screenshot is taken from an iPhone in portrait mode (320 pixels wide), and the rest of the page has In this case, the aspect ratio is 16:9, which means that the height will� embedded-browser. Score 1. Posts 1. ios. Score 1. Posts 1. View all tags → 1 Wrong viewport/page height in embedded Facebook browser in iOS 9.x May 2 '19.

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();
  ...

Why doesn't my site display properly in the Facebook in-App Browser?, Read more about the Facebook in-app Browser and why you need to test Things I've spotted so far are buttons appearing in the wrong place content causing this by visiting your site in Chrome and checking that iPhone Facebook in-app browser, but not from the Android Facebook in-app browser. I found something else: In the embedded browser the window.innerHeight gives the wrong value (screen size instead of viewport). I believe that this is the reason why css height 100% for html and body does not work because it gets the wrong value too.

Configuring the Viewport, Since any of the width, height, and initial scale may be inferred by Safari on iOS, the viewport may resize when the user changes orientation. 10vh will resolve to 10% of the current viewport height. Viewport Minimum (vmin) – A percentage of the viewport width or height, whichever is smaller. 10vmin will resolve to 10% of the current viewport width in portrait orientations, and 10% of the viewport height on landscape orientations. Viewport Maximum (vmax) – A percentage of the

Responsive iframes — The Right Way (CSS Only)!, Responsive iframes with CSS only — clean & cross-browser Don't let an iframe ugly-up your beautiful site. box that'll adjust its height based on width — great for embedded videos. An error occurred while retrieving sharing information. $responsive-embed-ratios: ( default: 16 by 9, vertical: 9 by 16,� With mobile devices, we’re often concerned with the vertical height, so let’s look specifically at viewport height (vh): vh unit Equal to 1% of the height of the initial containing block. So yeah, no clear guidance there when it comes to handling device and browser-specific differentiations.

Making SVGs Responsive with CSS, An SVG can be embedded on a web page in many ways; one of which is When an SVG is embedded as an image in an <img> tag, the height and width specified These results were obtained from tests made in Internet Explorer 9 and 11. An inline svg 's viewport is established by the height and width� Step-by-Step 1. Choose URL or Page. Pick the URL of a Facebook video you want to embed. 2. Code Configurator. Paste the URL to the Code Configurator and click the "Get Code" button to generate your embedded video player code.

Comments
  • Just a small note: had to add minimum-scale=1.0 to the viewport meta tag as well to get this to work. Also, you are true hero for figuring this out - you just saved us getting a big release out on time! 🙏
  • While this worked it also introduced 2 new bugs: 1) When scrolling on the footer element itself, it pushes the page up and gets stuck there. 2) When refreshing the page without touching it, the page gets pushed up twice. I've been able to reproduce the solution above and the 2 bugs on my app, but no fix yet.
  • @Danny_Joris I have been running into the same "pushed up page" bug that you described above. Did you ever manage to find a fix?
  • I fixed pushing the page up by resetting body scroll position with document.body.scrollTop = 0
  • I know it's kind of late comment, but what that isFacebook(ua) is supposed to do? how do you actually check that is a in-app browser? I'm facing a similar issue with android in-app and I can't get any difference between regular browser and in-app browser. Thanks!