HTML5 Doctype with iframe

When including a full height/width iframe within an HTML5 doctype, there is a border added to the bottom which I cannot seem to remove. This adds a scrollbar to the page to account for the border. Unfortunately, I am restricted by the following:

Need to use an iframe
iframe is inside a container that is fixed position taking up the entire screen
html and body have overflow hidden
Need the HTML5 doctype (removing the doctype or switching to an older doctype will fix the scrollbar issue)
Need to keep overflow-y: auto and -webkit-overflow-scrolling: touch on the #container as iOS does not scroll the frame otherwise (or can't seem to make it scroll).

I have a plunker here that exhibits the same. Removing the html5 doctype from this shows it would fix the issue (but that is not a viable solution).

Is there any CSS or attributes that would remove that border bottom and remove the outer (unnecessary) scrollbar?

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#container {
    position:fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#foo {
    height: 100%;
    width: 100%;
}

<!DOCTYPE html>
<html>

  <body>
    <div id="container">
      <iframe id="foo" frameborder="0" marginwidth="0" marginheight="0"
      src="//www.iana.org/domains/reserved"></iframe>
    </div>
  </body>

</html>

Solution

The "bottom border" is not a border, it is an inline element space (an iframe is an inline element), so the fix is to get rid of that "space".

Here are 3 ways for "foo":

display: block
position: absolute
margin-bottom: -4px;

Note: display: block appears to not work so well in some cases on iOS.

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#container {
    position:fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#foo {
    display: block;
    height: 100%;
    width: 100%;
}

<!DOCTYPE html>
<html>

  <body>
    <div id="container">
      <iframe id="foo" frameborder="0" marginwidth="0" marginheight="0"
      src="//www.iana.org/domains/reserved"></iframe>
    </div>
  </body>

</html>