Skip to content

Instantly share code, notes, and snippets.

@GreenGremlin
Last active December 14, 2015 05:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save GreenGremlin/5036539 to your computer and use it in GitHub Desktop.
Example of mobile Safari viewport height bug.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<style>
body {
margin: 0;
}
.view-port-sized {
height: 100vh;
width: 100vw;
background: red;
}
.content {
height: 2000px;
}
</style>
</head>
<body>
<div class="view-port-sized">This element should be 100% of the viewport height and width.
<style> .wrapper { width: 100%; } </style>
</div>
<div class="content">This is content to increase the height of the page.</div>
<script type="text/javascript">
document.addEventListener( "DOMContentLoaded", function(){
setTimeout( function (){
var div = document.createElement('div'),
body = document.body;
div.innerHTML += '<style></style>';
body.appendChild(div);
document.documentElement.appendChild(body);
div.parentNode.removeChild(div);
}, 1000);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment