Extra body height on iPad landscape with no body content (iOS7)

Question

The problem:
When loading the URL above on iOS7 iPad in landscape mode, there is a vertical scrollbar. There is no body content, and it's normalizing the body/html margin/padding. Just to be clear this is the minimum test-case I could provide, hence the lack of content and blank page.

Demo:
http://fiddle.jshell.net/AKRCa/show/

Things I've tried:
Setting the viewport to:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">`

Some other info:
I don't have access to an iPad running iOS6 but I tested the demo on an iPad3 running iOS6 using browserstack and there was no scrollbar, so it appears this bug is limited to iOS7.

iPhone portrait also has no scrollbar, but iPhone landscape does.

Answer 1

Okay so after some tests (The result of which are here) I've settled on two things:

1. This bug (At least I think it is a bug...) is related to webkit-scrolling and does not actually affect the height of your website/app

2. If it's a single page app that you're creating you need to add this JS to it to prevent any scroll events from triggering. This will also prevent the springy over scroll effect and your vertical scroll bar problem.

   document.ontouchmove = function(event){
     event.preventDefault();
   }
   

JsFiddle shows the experiments I did. Hope that helps!