Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test (Overflow): body with overflow:hidden</title>
<meta name="flags" content="interact">
<meta name="assert" content="position:fixed layer should not be able to cause scrolling of body styled as overflow:hidden">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
/* what we're testing */
overflow: hidden;
}
h1 {
/* bottom of #overlay-inner */
position: absolute;
bottom: 0;
left: 0;
}
.margin-0 {
/* remove extra space */
margin: 0;
}
.tall {
height: 100vh;
width: 100%;
}
#bad {
background-color: red;
}
#overlay {
overflow: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#overlay-inner {
position: relative;/* needed for the h1 */
width: 60%;/* leave room for #bad to be visible */
height: 150vh;/* force scroll */
/* make this visually distinct */
background-color: blue;
color: white;
}
</style>
</head>
<body class="margin-0">
<div id="overlay">
<div id="overlay-inner">
<ol class="margin-0">
<li>Scroll the blue square downward until you see the word "BOTTOM".</li>
<li>End your scrolling action/gesture. (e.g. Remove your finger from the touchscreen.)</li>
<li>Attempt to scroll the blue square further downward.</li>
<li>If you see any red, then the test result is FAILED. Otherwise, it is PASSED.</li>
</ol>
<h1 class="margin-0">BOTTOM</h1>
</div>
</div>
<div class="tall"></div>
<div id="bad" class="tall"></div>
</body>
</html>