Skip to content

Instantly share code, notes, and snippets.

@mckamey

mckamey/index.html

Created September 20, 2012 17:48
Show Gist options
  • Save mckamey/3757332 to your computer and use it in GitHub Desktop.
Save mckamey/3757332 to your computer and use it in GitHub Desktop.
Download ZIP
Mobile Webkit reflow issue repro
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mobile Webkit reflow issue</title>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
#lipsum {
margin-left:4em; padding:0;
}
#index {
background-color:black; bottom:0; display:block; left:0; margin:0; padding:0; position:fixed; top:0; width:3em;
}
#index li a {
color:white; cursor:pointer; display:block; line-height: 2em; text-align:center; text-decoration:none;
}
</style>
</head>
<body>
<div id="lipsum">
<h2 id='A'>A</h2><ul>
<li>Ut faucibus nulla pharetra neque volutpat ultricies.</li>
<li>Nulla volutpat lacus id tellus viverra ornare.</li>
<li>Fusce feugiat aliquet velit, sed dapibus mi vestibulum vitae.</li>
<li>Sed porttitor eros non quam aliquam porttitor.</li>
</ul><h2 id='B'>B</h2><ul>
<li>Curabitur tempus purus vel lorem vulputate id sodales ipsum lacinia.</li>
<li>Nunc luctus mi et odio convallis sed imperdiet nunc varius.</li>
<li>Proin hendrerit placerat quam, at interdum massa placerat non.</li>
<li>Pellentesque non nunc at erat sollicitudin viverra.</li>
</ul><h2 id='C'>C</h2><ul>
<li>Cras tempor augue non magna mattis tempus.</li>
<li>Mauris commodo dapibus massa, vel ultricies libero suscipit in.</li>
<li>Maecenas sit amet urna sit amet quam hendrerit blandit in vel lacus.</li>
<li>Etiam in lacus nec purus facilisis varius.</li>
</ul><h2 id='D'>D</h2><ul>
<li>In quis lacus justo, facilisis vehicula justo.</li>
<li>Duis quis est ac sem tincidunt consequat.</li>
<li>Cras laoreet tempor dolor, vel hendrerit nibh mattis ac.</li>
<li>Duis fermentum sem id nisi vestibulum fermentum.</li>
</ul><h2 id='E'>E</h2><ul>
<li>Etiam volutpat dictum ligula, vel laoreet odio auctor a.</li>
<li>Sed sodales vehicula augue, et tincidunt risus mattis quis.</li>
<li>Suspendisse ac magna vel sapien sagittis accumsan.</li>
<li>Praesent ac elit augue, at condimentum velit.</li>
</ul><h2 id='F'>F</h2><ul>
<li>Cras quis nulla quis dolor vehicula pulvinar laoreet quis urna.</li>
<li>Ut a enim sit amet ipsum pretium commodo eget interdum nunc.</li>
<li>Proin tristique tempus est, nec placerat nisi gravida vel.</li>
<li>Ut ac nisl a libero tincidunt vehicula.</li>
</ul><h2 id='G'>G</h2><ul>
<li>Donec vulputate orci nec justo laoreet rutrum ac ut mauris.</li>
<li>Nunc scelerisque eleifend nisl, eu pellentesque velit hendrerit a.</li>
<li>Nunc posuere enim commodo nunc dapibus gravida.</li>
<li>Suspendisse sed sem sagittis libero vulputate bibendum.</li>
</ul><h2 id='H'>H</h2><ul>
<li>Donec eu magna et lorem cursus dictum.</li>
<li>Ut placerat libero ac sem aliquam eu sodales eros interdum.</li>
<li>Phasellus ut tortor ac risus elementum semper.</li>
<li>Aliquam id augue ac lorem elementum eleifend sed sit amet metus.</li>
</ul><h2 id='I'>I</h2><ul>
<li>Donec pulvinar justo tristique tellus dapibus vitae blandit ipsum porttitor.</li>
<li>Phasellus volutpat magna eget elit dapibus ac tincidunt turpis ullamcorper.</li>
<li>Sed ut urna at mauris suscipit imperdiet.</li>
<li>Phasellus porta quam in nisl ultricies vitae vehicula lorem dignissim.</li>
</ul><h2 id='J'>J</h2><ul>
<li>Vestibulum aliquet massa sed velit tincidunt iaculis.</li>
<li>Phasellus at lacus eget ipsum malesuada rhoncus.</li>
<li>In venenatis pulvinar tortor, porttitor blandit magna dignissim at.</li>
<li>Sed tincidunt neque in odio molestie in sodales magna posuere.</li>
</ul><h2 id='K'>K</h2><ul>
<li>Nulla facilisis nisi sit amet elit hendrerit eget pulvinar augue imperdiet.</li>
<li>Etiam vitae neque vitae quam imperdiet vestibulum sed et nisl.</li>
<li>Nunc rhoncus lacinia dui, vitae laoreet nunc suscipit sit amet.</li>
<li>Quisque ultrices nisi id sem feugiat eget varius odio cursus.</li>
</ul><h2 id='L'>L</h2><ul>
<li>Morbi sit amet mi metus, commodo accumsan lacus.</li>
<li>Morbi dapibus nibh eget elit ultricies gravida.</li>
<li>Nulla auctor sapien eget quam elementum molestie.</li>
<li>Duis vehicula pharetra metus, id cursus mauris pellentesque id.</li>
</ul><h2 id='M'>M</h2><ul>
<li>Mauris nec dui lorem, at sodales justo.</li>
<li>Mauris rutrum sagittis leo, quis suscipit neque ullamcorper nec.</li>
<li>Praesent lacinia dui id tortor imperdiet placerat.</li>
<li>Nulla et libero sodales erat iaculis consequat.</li>
</ul><h2 id='N'>N</h2><ul>
<li>Integer tincidunt mollis dui, id viverra nibh suscipit nec.</li>
<li>Fusce sed dolor turpis, et porttitor eros.</li>
<li>Duis vel massa in velit suscipit accumsan non nec magna.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul><h2 id='O'>O</h2><ul>
<li>Aliquam a nunc a ante facilisis auctor.</li>
<li>Nulla volutpat faucibus risus, et volutpat arcu fringilla quis.</li>
<li>Nullam sit amet urna magna, ut malesuada risus.</li>
<li>Ut faucibus nulla pharetra neque volutpat ultricies.</li>
</ul><h2 id='P'>P</h2><ul>
<li>Nulla volutpat lacus id tellus viverra ornare.</li>
<li>Fusce feugiat aliquet velit, sed dapibus mi vestibulum vitae.</li>
<li>Sed porttitor eros non quam aliquam porttitor.</li>
<li>Curabitur tempus purus vel lorem vulputate id sodales ipsum lacinia.</li>
</ul><h2 id='Q'>Q</h2><ul>
<li>Nunc luctus mi et odio convallis sed imperdiet nunc varius.</li>
<li>Proin hendrerit placerat quam, at interdum massa placerat non.</li>
<li>Pellentesque non nunc at erat sollicitudin viverra.</li>
<li>Cras tempor augue non magna mattis tempus.</li>
</ul><h2 id='R'>R</h2><ul>
<li>Mauris commodo dapibus massa, vel ultricies libero suscipit in.</li>
<li>Maecenas sit amet urna sit amet quam hendrerit blandit in vel lacus.</li>
<li>Etiam in lacus nec purus facilisis varius.</li>
<li>In quis lacus justo, facilisis vehicula justo.</li>
</ul><h2 id='S'>S</h2><ul>
<li>Duis quis est ac sem tincidunt consequat.</li>
<li>Cras laoreet tempor dolor, vel hendrerit nibh mattis ac.</li>
<li>Duis fermentum sem id nisi vestibulum fermentum.</li>
<li>Etiam volutpat dictum ligula, vel laoreet odio auctor a.</li>
</ul><h2 id='T'>T</h2><ul>
<li>Sed sodales vehicula augue, et tincidunt risus mattis quis.</li>
<li>Suspendisse ac magna vel sapien sagittis accumsan.</li>
<li>Praesent ac elit augue, at condimentum velit.</li>
<li>Cras quis nulla quis dolor vehicula pulvinar laoreet quis urna.</li>
</ul><h2 id='U'>U</h2><ul>
<li>Ut a enim sit amet ipsum pretium commodo eget interdum nunc.</li>
<li>Proin tristique tempus est, nec placerat nisi gravida vel.</li>
<li>Ut ac nisl a libero tincidunt vehicula.</li>
</ul><h2 id='V'>Z</h2><ul>
<li>Donec vulputate orci nec justo laoreet rutrum ac ut mauris.</li>
<li>Nunc scelerisque eleifend nisl, eu pellentesque velit hendrerit a.</li>
<li>Nunc posuere enim commodo nunc dapibus gravida.</li>
<li>Suspendisse sed sem sagittis libero vulputate bibendum.</li>
</ul><h2 id='W'>W</h2><ul>
<li>Donec eu magna et lorem cursus dictum.</li>
<li>Ut placerat libero ac sem aliquam eu sodales eros interdum.</li>
<li>Phasellus ut tortor ac risus elementum semper.</li>
<li>Aliquam id augue ac lorem elementum eleifend sed sit amet metus.</li>
</ul><h2 id='X'>X</h2><ul>
<li>Donec pulvinar justo tristique tellus dapibus vitae blandit ipsum porttitor.</li>
<li>Phasellus volutpat magna eget elit dapibus ac tincidunt turpis ullamcorper.</li>
<li>Sed ut urna at mauris suscipit imperdiet.</li>
<li>Phasellus porta quam in nisl ultricies vitae vehicula lorem dignissim.</li>
</ul><h2 id='Y'>Y</h2><ul>
<li>Vestibulum aliquet massa sed velit tincidunt iaculis.</li>
<li>Integer pretium adipiscing ligula, eget posuere magna varius sit amet.</li>
<li>Phasellus at lacus eget ipsum malesuada rhoncus.</li>
<li>In venenatis pulvinar tortor, porttitor blandit magna dignissim at.</li>
</ul><h2 id='Z'>Z</h2><ul>
<li>Sed tincidunt neque in odio molestie in sodales magna posuere.</li>
<li>Sed porta eros id eros eleifend vel euismod libero fringilla.</li>
<li>Sed non dui vel ante scelerisque fermentum.</li>
<li>Praesent eget felis odio, pellentesque dignissim massa.</li>
</ul>
</div>
<ul id="index"><li><a href="#A">A</a></li><li><a href="#B">B</a></li><li><a href="#C">C</a></li><li><a href="#D">D</a></li><li><a href="#E">E</a></li><li><a href="#F">F</a></li><li><a href="#G">G</a></li><li><a href="#H">H</a></li><li><a href="#I">I</a></li><li><a href="#J">J</a></li><li><a href="#K">K</a></li><li><a href="#L">L</a></li><li><a href="#M">M</a></li><li><a href="#N">N</a></li><li><a href="#O">O</a></li><li><a href="#P">P</a></li><li><a href="#Q">Q</a></li><li><a href="#R">R</a></li><li><a href="#S">S</a></li><li><a href="#T">T</a></li><li><a href="#U">U</a></li><li><a href="#V">V</a></li><li><a href="#W">W</a></li><li><a href="#X">X</a></li><li><a href="#Y">Y</a></li><li><a href="#Z">Z</a></li></ul>
</body>
</html>
Raw
reflow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mobile Webkit reflow issue</title>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
#lipsum {
margin-left:4em; padding:0;
}
#index {
background-color:black; bottom:0; display:block; left:0; margin:0; padding:0; position:fixed; top:0; width:3em;
}
#index li a {
color:white; cursor:pointer; display:block; line-height: 2em; text-align:center; text-decoration:none;
}
</style>
</head>
<body>
<div id="lipsum">
<h2 id='A'>A</h2><ul>
<li>Ut faucibus nulla pharetra neque volutpat ultricies.</li>
<li>Nulla volutpat lacus id tellus viverra ornare.</li>
<li>Fusce feugiat aliquet velit, sed dapibus mi vestibulum vitae.</li>
<li>Sed porttitor eros non quam aliquam porttitor.</li>
</ul><h2 id='B'>B</h2><ul>
<li>Curabitur tempus purus vel lorem vulputate id sodales ipsum lacinia.</li>
<li>Nunc luctus mi et odio convallis sed imperdiet nunc varius.</li>
<li>Proin hendrerit placerat quam, at interdum massa placerat non.</li>
<li>Pellentesque non nunc at erat sollicitudin viverra.</li>
</ul><h2 id='C'>C</h2><ul>
<li>Cras tempor augue non magna mattis tempus.</li>
<li>Mauris commodo dapibus massa, vel ultricies libero suscipit in.</li>
<li>Maecenas sit amet urna sit amet quam hendrerit blandit in vel lacus.</li>
<li>Etiam in lacus nec purus facilisis varius.</li>
</ul><h2 id='D'>D</h2><ul>
<li>In quis lacus justo, facilisis vehicula justo.</li>
<li>Duis quis est ac sem tincidunt consequat.</li>
<li>Cras laoreet tempor dolor, vel hendrerit nibh mattis ac.</li>
<li>Duis fermentum sem id nisi vestibulum fermentum.</li>
</ul><h2 id='E'>E</h2><ul>
<li>Etiam volutpat dictum ligula, vel laoreet odio auctor a.</li>
<li>Sed sodales vehicula augue, et tincidunt risus mattis quis.</li>
<li>Suspendisse ac magna vel sapien sagittis accumsan.</li>
<li>Praesent ac elit augue, at condimentum velit.</li>
</ul><h2 id='F'>F</h2><ul>
<li>Cras quis nulla quis dolor vehicula pulvinar laoreet quis urna.</li>
<li>Ut a enim sit amet ipsum pretium commodo eget interdum nunc.</li>
<li>Proin tristique tempus est, nec placerat nisi gravida vel.</li>
<li>Ut ac nisl a libero tincidunt vehicula.</li>
</ul><h2 id='G'>G</h2><ul>
<li>Donec vulputate orci nec justo laoreet rutrum ac ut mauris.</li>
<li>Nunc scelerisque eleifend nisl, eu pellentesque velit hendrerit a.</li>
<li>Nunc posuere enim commodo nunc dapibus gravida.</li>
<li>Suspendisse sed sem sagittis libero vulputate bibendum.</li>
</ul><h2 id='H'>H</h2><ul>
<li>Donec eu magna et lorem cursus dictum.</li>
<li>Ut placerat libero ac sem aliquam eu sodales eros interdum.</li>
<li>Phasellus ut tortor ac risus elementum semper.</li>
<li>Aliquam id augue ac lorem elementum eleifend sed sit amet metus.</li>
</ul><h2 id='I'>I</h2><ul>
<li>Donec pulvinar justo tristique tellus dapibus vitae blandit ipsum porttitor.</li>
<li>Phasellus volutpat magna eget elit dapibus ac tincidunt turpis ullamcorper.</li>
<li>Sed ut urna at mauris suscipit imperdiet.</li>
<li>Phasellus porta quam in nisl ultricies vitae vehicula lorem dignissim.</li>
</ul><h2 id='J'>J</h2><ul>
<li>Vestibulum aliquet massa sed velit tincidunt iaculis.</li>
<li>Phasellus at lacus eget ipsum malesuada rhoncus.</li>
<li>In venenatis pulvinar tortor, porttitor blandit magna dignissim at.</li>
<li>Sed tincidunt neque in odio molestie in sodales magna posuere.</li>
</ul><h2 id='K'>K</h2><ul>
<li>Nulla facilisis nisi sit amet elit hendrerit eget pulvinar augue imperdiet.</li>
<li>Etiam vitae neque vitae quam imperdiet vestibulum sed et nisl.</li>
<li>Nunc rhoncus lacinia dui, vitae laoreet nunc suscipit sit amet.</li>
<li>Quisque ultrices nisi id sem feugiat eget varius odio cursus.</li>
</ul><h2 id='L'>L</h2><ul>
<li>Morbi sit amet mi metus, commodo accumsan lacus.</li>
<li>Morbi dapibus nibh eget elit ultricies gravida.</li>
<li>Nulla auctor sapien eget quam elementum molestie.</li>
<li>Duis vehicula pharetra metus, id cursus mauris pellentesque id.</li>
</ul><h2 id='M'>M</h2><ul>
<li>Mauris nec dui lorem, at sodales justo.</li>
<li>Mauris rutrum sagittis leo, quis suscipit neque ullamcorper nec.</li>
<li>Praesent lacinia dui id tortor imperdiet placerat.</li>
<li>Nulla et libero sodales erat iaculis consequat.</li>
</ul><h2 id='N'>N</h2><ul>
<li>Integer tincidunt mollis dui, id viverra nibh suscipit nec.</li>
<li>Fusce sed dolor turpis, et porttitor eros.</li>
<li>Duis vel massa in velit suscipit accumsan non nec magna.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul><h2 id='O'>O</h2><ul>
<li>Aliquam a nunc a ante facilisis auctor.</li>
<li>Nulla volutpat faucibus risus, et volutpat arcu fringilla quis.</li>
<li>Nullam sit amet urna magna, ut malesuada risus.</li>
<li>Ut faucibus nulla pharetra neque volutpat ultricies.</li>
</ul><h2 id='P'>P</h2><ul>
<li>Nulla volutpat lacus id tellus viverra ornare.</li>
<li>Fusce feugiat aliquet velit, sed dapibus mi vestibulum vitae.</li>
<li>Sed porttitor eros non quam aliquam porttitor.</li>
<li>Curabitur tempus purus vel lorem vulputate id sodales ipsum lacinia.</li>
</ul><h2 id='Q'>Q</h2><ul>
<li>Nunc luctus mi et odio convallis sed imperdiet nunc varius.</li>
<li>Proin hendrerit placerat quam, at interdum massa placerat non.</li>
<li>Pellentesque non nunc at erat sollicitudin viverra.</li>
<li>Cras tempor augue non magna mattis tempus.</li>
</ul><h2 id='R'>R</h2><ul>
<li>Mauris commodo dapibus massa, vel ultricies libero suscipit in.</li>
<li>Maecenas sit amet urna sit amet quam hendrerit blandit in vel lacus.</li>
<li>Etiam in lacus nec purus facilisis varius.</li>
<li>In quis lacus justo, facilisis vehicula justo.</li>
</ul><h2 id='S'>S</h2><ul>
<li>Duis quis est ac sem tincidunt consequat.</li>
<li>Cras laoreet tempor dolor, vel hendrerit nibh mattis ac.</li>
<li>Duis fermentum sem id nisi vestibulum fermentum.</li>
<li>Etiam volutpat dictum ligula, vel laoreet odio auctor a.</li>
</ul><h2 id='T'>T</h2><ul>
<li>Sed sodales vehicula augue, et tincidunt risus mattis quis.</li>
<li>Suspendisse ac magna vel sapien sagittis accumsan.</li>
<li>Praesent ac elit augue, at condimentum velit.</li>
<li>Cras quis nulla quis dolor vehicula pulvinar laoreet quis urna.</li>
</ul><h2 id='U'>U</h2><ul>
<li>Ut a enim sit amet ipsum pretium commodo eget interdum nunc.</li>
<li>Proin tristique tempus est, nec placerat nisi gravida vel.</li>
<li>Ut ac nisl a libero tincidunt vehicula.</li>
</ul><h2 id='V'>Z</h2><ul>
<li>Donec vulputate orci nec justo laoreet rutrum ac ut mauris.</li>
<li>Nunc scelerisque eleifend nisl, eu pellentesque velit hendrerit a.</li>
<li>Nunc posuere enim commodo nunc dapibus gravida.</li>
<li>Suspendisse sed sem sagittis libero vulputate bibendum.</li>
</ul><h2 id='W'>W</h2><ul>
<li>Donec eu magna et lorem cursus dictum.</li>
<li>Ut placerat libero ac sem aliquam eu sodales eros interdum.</li>
<li>Phasellus ut tortor ac risus elementum semper.</li>
<li>Aliquam id augue ac lorem elementum eleifend sed sit amet metus.</li>
</ul><h2 id='X'>X</h2><ul>
<li>Donec pulvinar justo tristique tellus dapibus vitae blandit ipsum porttitor.</li>
<li>Phasellus volutpat magna eget elit dapibus ac tincidunt turpis ullamcorper.</li>
<li>Sed ut urna at mauris suscipit imperdiet.</li>
<li>Phasellus porta quam in nisl ultricies vitae vehicula lorem dignissim.</li>
</ul><h2 id='Y'>Y</h2><ul>
<li>Vestibulum aliquet massa sed velit tincidunt iaculis.</li>
<li>Integer pretium adipiscing ligula, eget posuere magna varius sit amet.</li>
<li>Phasellus at lacus eget ipsum malesuada rhoncus.</li>
<li>In venenatis pulvinar tortor, porttitor blandit magna dignissim at.</li>
</ul><h2 id='Z'>Z</h2><ul>
<li>Sed tincidunt neque in odio molestie in sodales magna posuere.</li>
<li>Sed porta eros id eros eleifend vel euismod libero fringilla.</li>
<li>Sed non dui vel ante scelerisque fermentum.</li>
<li>Praesent eget felis odio, pellentesque dignissim massa.</li>
</ul>
</div>
<ul id="index"><li><a href="#A">A</a></li><li><a href="#B">B</a></li><li><a href="#C">C</a></li><li><a href="#D">D</a></li><li><a href="#E">E</a></li><li><a href="#F">F</a></li><li><a href="#G">G</a></li><li><a href="#H">H</a></li><li><a href="#I">I</a></li><li><a href="#J">J</a></li><li><a href="#K">K</a></li><li><a href="#L">L</a></li><li><a href="#M">M</a></li><li><a href="#N">N</a></li><li><a href="#O">O</a></li><li><a href="#P">P</a></li><li><a href="#Q">Q</a></li><li><a href="#R">R</a></li><li><a href="#S">S</a></li><li><a href="#T">T</a></li><li><a href="#U">U</a></li><li><a href="#V">V</a></li><li><a href="#W">W</a></li><li><a href="#X">X</a></li><li><a href="#Y">Y</a></li><li><a href="#Z">Z</a></li></ul>
<script type="text/javascript" src="reflow.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment