Web page not getting 100% height in Twitter app on iOS 8

Question

OS: iOS 8.1.1 Browser: Safari Phone: iPhone 5C

We have a web page which takes 100% height and width. We have locked down the viewport so that the user can not scroll the page vertically or horizontally. This page is shared on Twitter via Safari web browser. When we view the the web page in the twitter app the bottom part of the page gets cut off. We are not able to view the page in its entirety. Even if we change the orientation multiple times still the cut off part is not visible.

The height of the part which is getting cut off is equal to the height of the twitter app container’s header (the part which has cross button, page title/url and share link) and the status bar (the part which has network status icon, time, battery level etc)

Note: This behavior is observed in iOS 8 only.

Answer 1

This has also been driving me crazy for the past several hours. The solution is to not use px or percentage based heights/widths but rather use position:fixed on your html and body elements, then setting top, left, right, bottom to 0. So your code will looks like this:

html, body{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

This forces the content to only be as wide and as tall as the viewport presented in twitters webview component without overflowing. Any code inside the body can now be 100% in either direction without fear of being hidden. This bug was affecting iOS9 as well. Confirmed the fix is working on iOS9.1 with latest Twitter app on ip6/6+, ip5, and ip4.

Answer 2

For anyone else coming across this, the fix I ended up using was

    window.addEventListener("resize", function(){
      onResize();
    });

    function onResize(){
      document.querySelector("html").style.height = window.innerHeight + "px"
    };

    onResize();

this seems to work in the latest version of twitter's browser on safari.