Skip to content

Instantly share code, notes, and snippets.

@richardscarrott

richardscarrott/index.html

Last active June 29, 2017 19:36
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 richardscarrott/91a2079ce23657f8e0829aed380365e6 to your computer and use it in GitHub Desktop.
Save richardscarrott/91a2079ce23657f8e0829aed380365e6 to your computer and use it in GitHub Desktop.
Download ZIP
iOS body scroll rubber banding bug
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
* {
margin: 0;
}
body, html {
height: 100%;
font-family: sans-serif;
}
body {
background: red;
}
.app {
background: blue;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
height: 100%;
}
.item {
background: rgb(255, 255, 255);
border-bottom: 1px solid #ddd;
height: 50px;
line-height: 50px;
padding: 0 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item:last-child {
border: none;
}
</style>
<!--
Example demonstrating body rubber banding even when body is set to height 100% and scrolling is achieved
through a nested div w/ -webkit-scrolling-overflow: touch;
-->
</head>
<body>
<div class="app">
<div class="item">Lorem ipsum dolor sit amet, consectetur</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">At vero eos et accusamus et</div>
<div class="item">Temporibus autem quibusdam</div>
<div class="item">Non proident, sunt in culpa qui officia</div>
<div class="item">Deserunt mollit anim id est laborum</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">At vero eos et accusamus et</div>
<div class="item">Temporibus autem quibusdam</div>
<div class="item">Non proident, sunt in culpa qui officia</div>
<div class="item">Deserunt mollit anim id est laborum</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">At vero eos et accusamus et</div>
<div class="item">Temporibus autem quibusdam</div>
<div class="item">Non proident, sunt in culpa qui officia</div>
<div class="item">Deserunt mollit anim id est laborum</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">At vero eos et accusamus et</div>
<div class="item">Temporibus autem quibusdam</div>
<div class="item">Non proident, sunt in culpa qui officia</div>
<div class="item">Deserunt mollit anim id est laborum</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">At vero eos et accusamus et</div>
<div class="item">Temporibus autem quibusdam</div>
<div class="item">Non proident, sunt in culpa qui officia</div>
<div class="item">Deserunt mollit anim id est laborum</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
<div class="item">At vero eos et accusamus et</div>
<div class="item">Temporibus autem quibusdam</div>
<div class="item">Non proident, sunt in culpa qui officia</div>
<div class="item">Deserunt mollit anim id est laborum</div>
<div class="item">Sed ut perspiciatis unde omnis iste natus error sit</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment