IOS 7 - css - html height - 100% = 692px

Question

I have a weird bug on iPad iOS7 landscape mode.

What i was able to investigate is that in iOS7 window.outerHeight is 692px and window.innerHeight 672px; while in previous versions both values are 672px.

Even though my <html> and <body> tags have height 100% there seems to be space for scrolling, and the weird thing is that this problem only shows up on landscpae

You can see what i am talking about by visiting t.cincodias.com, for example, in a iOS 7 iPad the footer bar (or the header sometimes) will be cut. But on previous iOS versions the content displays fine at fullscreen.

Even when i set the height of both tags to height: 672px !important and position:absolute; bottom: 0;, you can still scroll the content vertically by touching an iframe (the ads are iframes).

I'm running the release candidate version of iOS7

thanks for any help.

sorry about that, it was correctly spelled of course, and there are no margins or paddings — Pedro Garcia Mota, Sep 18 '13 at 07:15
Here's a nice hack that actually works for me: http://stackoverflow.com/a/19449123/795563 — agudulin, Oct 20 '13 at 17:32
On a side note: this bug seems to be fixed on iOS8. Workarounds should only target iOS7. — Patrick Rudolph, Oct 21 '14 at 14:34

score 16 · Answer 1 · edited Jun 24 '14 at 10:49

16

I used this JavaScript solution for solving that problem:

if (
    navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && 
    window.innerHeight != document.documentElement.clientHeight
) {
    var fixViewportHeight = function() {
        document.documentElement.style.height = window.innerHeight + "px";
        if (document.body.scrollTop !== 0) {
            window.scrollTo(0, 0);
        }
    };

    window.addEventListener("scroll", fixViewportHeight, false);
    window.addEventListener("orientationchange", fixViewportHeight, false);
    fixViewportHeight();

    document.body.style.webkitTransform = "translate3d(0,0,0)";
}

edited Jun 24 '14 at 10:49

thorn0

9,362
3
68
96

answered Nov 28 '13 at 16:39

czuendorf

853
6
9

Thank you for that! I thought I was going crazy for a second today while testing a UI I am building out. – Giancarlo Gomez Apr 13 '14 at 23:42
Thank you for this solution, is, at least, usefull. But, what about if I want to run this function only when the soft keyboard are shown? Any idea? Thank you very much! – eMarine May 26 '14 at 13:23
You can only detect that soft keyboard is shown, if you use Apache Cordova/Phonegap and enabling viewport resizing when soft keyboard appears. – czuendorf May 26 '14 at 15:10

score 15 · Answer 2 · answered Sep 19 '13 at 14:48

15

I believe this is a bug in iOS 7 - if you rotate it to portrait mode, it sets both (innerHeight/outerHeight) to the same value. If it isn't a bug, then portrait mode has one because the behavior isn't consistent.

You could detect iOS 7/mobile Safari and use window.innerHeight if iOS 7.

answered Sep 19 '13 at 14:48

ururk

173
1
5

1

Ww are also hoping it's just a bug, we are opting right now for a specific style for iOS7 but we were hoping that this wouldn't be the final solution, thanks for the answer anyway – Pedro Garcia Mota Sep 20 '13 at 14:51
1

Have you found anything related to it? I am having the same problem in Landscape mode, it ruins every media query (for ios7 landscape on ipad/ipad mini/ipod latest gen) I am running and I've noticed it to the emulator as well. What kind of media queries do you use (if you do)? – Panagiotis Sep 30 '13 at 08:49
@Panagiotis, you can try something like this: 1. set $(window).height(672); 2. call window.scrollTo(0, 0); every time user try scroll the whole page (with some locking algorithm), or try to unbind scroll event. – agudulin Oct 02 '13 at 12:49
Actually my problem was a duplicate meta tag. I removed the offensive code and it worked fine. Thanks though. – Panagiotis Oct 02 '13 at 16:18
1

@Panagiotis Can you say which meta tag generated the problem? – Pedro Garcia Mota Oct 09 '13 at 11:37
There was a double definition of meta viewport that passed our checks. – Panagiotis Oct 09 '13 at 12:19
1

It appears to a bug. I made a test case at http://jonfabritius.net/tests/792_reduction.html and submitted that to http://bugreport.apple.com. Is this similar to what you're experiencing? – Jon Fabritius Oct 17 '13 at 06:16
@JonFabritius: is it possible to subscribe somehow to that bugreport? – Dmitry Oct 22 '13 at 11:53

agfa555 · Answer 3 · 2013-11-22T13:24:44.520

7

I'll combine the answers. Thanks all!

You can do something like this:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('#yourDivID').height(window.innerHeight);
    window.scrollTo(0, 0);
}

The window.scrollTo solves the issue of the bar overlapping in landscape when rotating.

Cheers!

edited Nov 22 '13 at 13:24

answered Nov 21 '13 at 18:17

agfa555

950
13
19

score 1 · Answer 4 · answered Jan 21 '15 at 21:31

I reproduce the same problem in iOS 8.

Here is my solution.

I listened resize, scroll, orientationChange event, to ensure when user trigger screen size change, will call reset height function.

I wrote a debounce to prevent multiple call.

And It's in a closure and no dependent (no jQuery).

(function(){
  var setViewportHeight = (function(){
    function debounced(){
      document.documentElement.style.height = window.innerHeight + "px";
      if (document.body.scrollTop !== 0) {
          window.scrollTo(0, 0);
      }
    }
    var cancelable = null;

    return function(){
      cancelable && clearTimeout(cancelable);
      cancelable = setTimeout(debounced, 100);
    };
  })();

  //ipad safari
  if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){  
    window.addEventListener("resize", setViewportHeight, false);
    window.addEventListener("scroll", setViewportHeight, false);
    window.addEventListener("orientationchange", setViewportHeight, false);
    setViewportHeight();
  }
})();

IOS 7 - css - html height - 100% = 692px

4 Answers4

Linked