Ionic-framework: [Web app] window height is not correct in facebook in-app browser

Created on 17 Apr 2017 · 3Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[ x] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
For facebook in-app browser, when use tab-page template, the tab-page is hidden.
However, for safari/chrome, it works fine.

Expected behavior:
show tab-page

Other information:
On Safari, it works great:

On facebook in-app browser, the tab is hidden

stale issue

Source

qcnguyen

👍1

Most helpful comment

I'm also desperate to get this resolved for a soon-to-be-launched competition web app. Most of out demographic will be accessing the web app via Facebook mobile in-app browser so this is a critical issue.

I added this hack to app.component.ts constructor, which seems to help initially:

    // Viewport height hack for Facebook app browser
    window.addEventListener('resize', function() {
        onResize();
    });
    function onResize() {
        document.querySelector('html').style.height = window.innerHeight + 'px'
    };
    onResize();

However, when the device orientation is changed from landscape to portrait or inputs are focussed, the height doesn't respond accordingly, leaving the screen cut off halfway. I'm using Ionic 3.4.2.

guylillico on 9 Jun 2017

👍2 ❤1

All 3 comments

Hello, thanks for using Ionic. We will look into this.

jgw96 on 17 Apr 2017

👍2

I added this hack to app.component.ts constructor, which seems to help initially:

    // Viewport height hack for Facebook app browser
    window.addEventListener('resize', function() {
        onResize();
    });
    function onResize() {
        document.querySelector('html').style.height = window.innerHeight + 'px'
    };
    onResize();

However, when the device orientation is changed from landscape to portrait or inputs are focussed, the height doesn't respond accordingly, leaving the screen cut off halfway. I'm using Ionic 3.4.2.

guylillico on 9 Jun 2017

👍2 ❤1

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!