100% height CSS for iOS iPad - ios

Question

(I have been reading up on the topic of iOS mobile safari and how it displays some positioning and css styles differently.)
I am still trying to solve the issue which is having the background content to take up the entire display height on the iPad, I was hoping to achieve the same style as I have for the desktop and when I shrink the browser to tablet view. Instead the content just has a 100% width.
The background content has it's own tags. I am using media queries so that on mobile there is no background content and temporarily I have turned tablet display to none. If I turn display to block, I find I can shrink the browser and the background video or image takes up the entire height matching the top-section but On iOS it does not. -
Any comments or advice will be much appreciated.
meta data:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
HTML:
<div class="top-section">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/screentest1.webmhd.webm" type="video/webm">
<source src="videos/screentest1.mp4" type="video/mp4"> Video not supported
</video>
<div id="video_pattern">
</video>
</DIV>
</div>
CSS:
#video_background {
display: none;
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1000;
overflow: hidden; }
#video_pattern { background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82) ); /* For Safari */
background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* Standard syntax */;
position: absolute; left: 0px; top: 0px; width: 100%; min-height: 100%; z-index: 1; }
.top-section{
background-size: cover;
background-repeat: repeat;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 2;
text-align: center;
padding: 0;}

Answer 1

I think it's a bug, I can't get right 100% height by CSS.
window.innerHeight is the most reliable way to get the real viewport height.
Here is my hack to reset viewport height.
It's in closure and no dependent.
(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();
}
})();

Answer 2

If we could see this live it would be helpful but you may need to apply styles to your body and html tags. Like this fiddle:
http://jsfiddle.net/Davidicus/2eaaP/
try adding
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Im pretty sure that iOS will force all video to play in the default player so there is no fix for you there yet.