Skip to content

Instantly share code, notes, and snippets.

@BKcore

BKcore/TestVH.html

Created February 23, 2016 20:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BKcore/024240964ba5e0c0ccec to your computer and use it in GitHub Desktop.
Save BKcore/024240964ba5e0c0ccec to your computer and use it in GitHub Desktop.
Download ZIP
Repro: Open page at 720p. Resize to 600 * 150. Compare Coherent with Chrome. Resize to 1200 * 1200. Compare with Chrome.
Raw
TestVH.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Loading</title>
<style type="text/css">
* {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
position: relative;
margin: 0;
color: #cad5d7;
background: #3a424d;
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
.grid {
position: absolute;
padding-top: 2%;
padding-left: 10%;
top: 25%;
right: 25%;
bottom: 25%;
left: 25%;
border: 1px solid blue;
font-size: 1em;
text-align: left;
}
.test-vh {
position: absolute;
padding-top: 2vh;
padding-right: 10vh;
width: 50vw;
height: 50vh;
top: 0;
left: 0;
margin-top: 25vh;
margin-left: 25vw;
margin-bottom: 25vh;
margin-right: 25vw;
border: 1vh solid red;
font-size: 5vh;
text-align: right;
}
.grid .grid {
border-color: #0ff;
}
.grid .test-vh {
border-color: #f0f;
}
.test-vh .grid {
border-color: #ff0;
}
.test-vh .test-vh {
border-color: #fa0;
}
</style>
</head>
<body>
<div>
<div class="grid">G<div class="grid">G.GRID</div><div class="test-vh">G.VH</div></div>
<div class="test-vh">H<div class="grid">H.GRID</div><div class="test-vh">H.VH</div></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment