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 do

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.