jaikdean/index.html

## index.html
<!doctype html>
<html>
  <head>
    <title>Subpixel rounding annoyance</title>
    <style>
      .container {
        position: absolute;
        top: 20.5px;
        left: 20.5px;
        overflow: hidden;
        width: 300.5px;
        height: 300.5px;
        background: #ddd;
      }

      .offset {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: #999;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="offset">
      </div>
    </div>
    <p>
      Notice how the darker, inner div overflows the containing box in Chrome despite its <code>overflow</code> being set to
      <code>hidden</code>. This seems to occur when both the position and dimension of the container have a fractional pixel
      greater than or equal to 0.5.
    </p>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Subpixel rounding annoyance</title>
	<style>
	.container {
	position: absolute;
	top: 20.5px;
	left: 20.5px;
	overflow: hidden;
	width: 300.5px;
	height: 300.5px;
	background: #ddd;
	}

	.offset {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	background: #999;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="offset">
	</div>
	</div>
	<p>
	Notice how the darker, inner div overflows the containing box in Chrome despite its <code>overflow</code> being set to
	<code>hidden</code>. This seems to occur when both the position and dimension of the container have a fractional pixel
	greater than or equal to 0.5.
	</p>
	</body>
	</html>