Skip to content

Instantly share code, notes, and snippets.

@francois2metz
Created August 25, 2011 09:00
Show Gist options
  • Save francois2metz/1170280 to your computer and use it in GitHub Desktop.
Save francois2metz/1170280 to your computer and use it in GitHub Desktop.
Testcase to show chrome bug with position fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chrome bug position fixed</title>
<style type="text/css">
.topbar {
left: 0;
position: fixed;
top: 0;
}
.container {
margin-left: 140px;
}
</style>
</head>
<body>
<ul class="topbar">
<li><a href="#clickhere">Click here</a></li>
</ul>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in purus id metus feugiat consequat. Duis nunc tortor, rhoncus ac lobortis at, congue ac eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse magna sem, vestibulum eu pellentesque ut, sagittis aliquam tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue pretium dolor, nec malesuada ligula mollis at. Aenean suscipit suscipit tellus a feugiat.
</p>
<p>
Nunc a porttitor augue. Nam ullamcorper, enim ut vestibulum porta, risus nunc rutrum lectus, sit amet cursus ante urna ut justo. Curabitur ut interdum purus. In dolor risus, ultricies et fermentum a, cursus malesuada nulla. Donec sed enim ut tellus convallis pellentesque non eu massa. Donec a mattis eros. Curabitur ac nibh est, sit amet ullamcorper felis. Pellentesque sollicitudin ante ac neque adipiscing auctor.
</p>
<p>
Vivamus a augue quam, eget mattis sapien. Integer semper eleifend arcu, in tincidunt tortor egestas sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi adipiscing sem vitae diam mollis et adipiscing nisl viverra. Maecenas vel justo ligula, in auctor enim. Maecenas id auctor urna. Proin id purus sed arcu tristique euismod vitae in sem. Vivamus vitae condimentum erat. Cras et posuere nulla. Integer consectetur rhoncus eros quis pulvinar. Morbi a dolor dui. Cras pellentesque interdum venenatis. Proin rhoncus urna ac ligula venenatis sit amet condimentum lectus posuere. Praesent quis justo metus.
</p>
<p>
Donec tempor velit non sapien fringilla rutrum. Ut eget orci dui. Fusce scelerisque sem in lacus scelerisque venenatis id vel nisl. In vel felis et ante euismod elementum vitae sed mauris. In bibendum volutpat purus, quis placerat sapien malesuada at. Nulla sollicitudin dapibus nulla. Donec fringilla tellus quis turpis molestie malesuada. Integer varius elit ac lacus porttitor non elementum purus bibendum. Nam accumsan enim elementum tortor semper porta tempor est condimentum. Curabitur odio nisl, interdum et porttitor sed, posuere sit amet augue. Morbi vehicula sapien placerat nibh euismod tincidunt sagittis justo imperdiet. Quisque vel purus velit, at malesuada quam. Donec eu nulla elit. Quisque at mollis nisl.
</p>
<p>
Nulla sed vulputate velit. Nullam pellentesque, quam tincidunt luctus congue, purus orci sollicitudin sem, et viverra erat ipsum ac dui. Integer semper vehicula diam, quis porta tellus vehicula non. Morbi in lorem a mauris malesuada bibendum et at magna. Donec ultricies ante a magna tempus adipiscing. Donec non nibh ut ante venenatis molestie. Nunc luctus sapien ac mauris hendrerit vitae sollicitudin magna tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus nulla neque, eleifend eget elementum ut, vestibulum at eros. Fusce vitae bibendum nisi. Aenean id congue libero.
</p>
<p>
Sed pulvinar ante ut nibh semper ut adipiscing purus imperdiet. Nulla venenatis fermentum nibh, at tempus velit cursus vel. Nullam volutpat condimentum ligula, eget volutpat massa posuere id. Pellentesque volutpat libero hendrerit turpis interdum eget vestibulum sem tincidunt. Integer et scelerisque enim. Sed malesuada, ligula a molestie viverra, turpis urna pretium velit, in venenatis justo leo vel tellus. Nullam porttitor, dolor sed porttitor iaculis, orci dui luctus eros, quis posuere lectus diam a leo. Phasellus vel diam quam, eget mollis ligula.
</p>
<p>
Nunc varius, dui a eleifend vehicula, nisl nulla sodales libero, nec laoreet sem orci vel quam. Mauris auctor rutrum orci, sit amet vestibulum ante porta non. Nam pulvinar mi eget justo elementum varius. Fusce ut facilisis ligula. Morbi eu consectetur tellus. Vestibulum nec ullamcorper nisl. In ante erat, vestibulum ac lacinia in, faucibus interdum elit. Integer nec nisl mi. Quisque vel nulla sed sem tempus bibendum. Donec suscipit, metus at dictum laoreet, magna metus bibendum nibh, vitae porta eros elit a enim. Morbi elementum eleifend volutpat. Integer eget elit mauris, quis porttitor augue. Integer eu libero augue.
</p>
<p>
Praesent ut lacus posuere tellus aliquam iaculis sit amet vitae turpis. In hac habitasse platea dictumst. Integer eleifend aliquam eros, vel consequat odio varius a. In orci leo, accumsan eu viverra interdum, sodales ac lectus. Sed luctus leo ut elit consequat eu mollis orci laoreet. Vestibulum lobortis hendrerit nunc, in lobortis est dignissim quis. Cras egestas, enim quis sodales cursus, metus nibh aliquet augue, vel tincidunt tortor nulla eget diam. Sed nec risus id libero egestas congue at eget libero. Mauris egestas libero nec erat congue dictum. Nullam nec dolor nunc. Duis in ante sem. Integer consectetur varius eleifend. Suspendisse pulvinar sagittis tincidunt. Proin tincidunt quam et neque semper varius. Nunc nibh diam, molestie id tincidunt a, vehicula sit amet justo. Nam vel arcu risus.
</p>
<p>
Vestibulum at facilisis velit. Morbi sagittis, odio a ullamcorper mattis, tortor turpis blandit dui, a luctus ligula lacus nec neque. Sed venenatis rhoncus arcu, ornare consequat odio aliquam eu. Nullam et nibh adipiscing massa consectetur gravida sit amet ut est. Fusce rhoncus adipiscing ullamcorper. Vivamus venenatis sollicitudin urna, quis tincidunt turpis dictum sit amet. Donec lacinia, nulla vitae eleifend tincidunt, tellus leo gravida mi, nec luctus massa lectus a magna.
</p>
<p>
Cras consequat commodo felis a lobortis. In hac habitasse platea dictumst. Etiam tincidunt, dolor non rutrum tristique, felis odio porta dolor, sed eleifend dolor arcu eu leo. Nulla tincidunt consectetur mollis. In gravida condimentum velit sed interdum. Cras non convallis augue. Fusce ut dignissim quam. Duis eleifend, lectus id lobortis tempus, elit leo feugiat ipsum, eget interdum massa urna vitae lorem. Proin vitae nisi risus. Fusce nec lectus ligula. Morbi vulputate ultricies blandit. Aenean vitae nibh eu sapien elementum mattis sed in magna. Etiam mollis erat vitae quam dictum accumsan. Aenean consequat bibendum odio, vel commodo tortor lacinia nec.
</p>
</div>
<ul id="clickhere">
<li>Look at the left, the menu have disappear.</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment