Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 230 lines (159 sloc) 6.51 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rounding Error Test</title>
<meta name="Big John" content="March 7, 2003" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content=" This is a test page for the 'rounding error' gaps seen when absolute positioning is used with percentages " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<style type="text/css">
<!--
html {margin: 0; padding: 0; height: 100%;}
body {margin: 0; padding: 0; background: #9ec; font-family: verdana,sans-serif;
font-size: 80%; height: 100%;}
h1 {font-size: 22px; border-bottom: 3px solid #fff; background-color: #000;
margin-top: 0; color: #fff; padding: 3px 0 3px 3em;}
h2 {font-size: 1.2em; font-weight: bold; margin: 1.5em 0 .5em 12%;}
.textbox {margin: 0em 0 3em;}
.textbox p {margin: .6em 15% .6em 17%; padding: 0;}
.alignright {margin: 0 2em; text-align: right;}
.small {font-size: .9em;}
pre {margin: 30px 12%; padding: 20px 20px 20px 50px; background-color: #f8ddb8;
border: 2px dotted #000; font-size: 1.1em;}
a {color: #000;}
/**************** Demo rules *******************/
#wrapper {
position: relative;
margin: 2em 10%;
height: 60%;
}
#wrapper div {
position: absolute;
background: black;
width: 20%;
height: 20%;
}
.v-one {top: 0;}
.v-two {top: 20%;}
.v-three {top: 40%;}
.v-four {top: 60%;}
.v-five {top: 80%;}
.h-one {left: 0;}
.h-two {left: 20%;}
.h-three {left: 40%;}
.h-four {left: 60%;}
.h-five {left: 80%;}
-->
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/init.js"></script>
</head>
<body>
<h1>The 1 Pixel Rounding Error Problem</h1>
<p class="alignright">
<a href="index-2.html"><strong>Return to p.i.e.</strong></a>
</p>
<div id="wrapper">
<div class="h-one v-one"></div>
<div class="h-one v-two"></div>
<div class="h-one v-three"></div>
<div class="h-one v-four"></div>
<div class="h-one v-five"></div>
<div class="h-two v-one"></div>
<div class="h-two v-two"></div>
<div class="h-two v-three"></div>
<div class="h-two v-four"></div>
<div class="h-two v-five"></div>
<div class="h-three v-one"></div>
<div class="h-three v-two"></div>
<div class="h-three v-three"></div>
<div class="h-three v-four"></div>
<div class="h-three v-five"></div>
<div class="h-four v-one"></div>
<div class="h-four v-two"></div>
<div class="h-four v-three"></div>
<div class="h-four v-four"></div>
<div class="h-four v-five"></div>
<div class="h-five v-one"></div>
<div class="h-five v-two"></div>
<div class="h-five v-three"></div>
<div class="h-five v-four"></div>
<div class="h-five v-five"></div>
</div>
<div class="textbox">
<h2>The theory</h2>
<p>
When boxes are rendered, and the dimensions of those boxes are defined in 'relative' units
such as percentages or EM's, then the browser must work out how many screen pixels
to assign to the box dimensions. The problem is that these relative units do not always exactly
correspond to a given number of pixels, but all rendered boxes <em>must</em> be sized to an exact
number of pixels. It's clear that a perfect solution is not possible.
</p>
<p>
Still, a solution must be found, so the browsers sometimes 'round off' the internal calculations
in order to arrive at a simple pixel value for box dimensions. However, for complex reasons the
rounding off might occur in the 'wrong' direction and can result in a visible 1 pixel gap (or sometimes a
1 pixel overlap) next to those boxes. In certain situations the effect can occur with a single box as well.
</p>
<h2>The demo</h2>
<p>
The demo above illustrates this effect, having a five-by-five matrix of absolutely positioned,
percentage-sized black boxes, which should join together into a seamless large black box.
If rounding errors occur, they will appear as
thin gaps running horizontally and vertically thru the big box. Because the boxes are sized with
percentages, the window size strongly affects if and where the gaps may appear.
</p>
<h2>Testing</h2>
<p>
If you resize a browser window, you will see different arrangements of gaps in the demo.
Try <strong>dragging the window edges</strong> to resize the window, so you can see
the horizontal and vertical gaps come and go in real time. Kinda cool.
</p>
<h2>How the browsers stack up (as of June 2009)</h2>
<p>
<strong>Firefox&nbsp;3</strong> was released in June of 2008, and <em>it doesn't show
any rounding errors, whatsoever!</em> This is an impressive achievement.
<strong>Internet&nbsp;Explorer&nbsp;8</strong> (released March of 2009) also shows
a clear test field, free of errors. Not too shabby, you guys!
</p>
<p>
<strong>IE7</strong> shows the errors at some window widths. <strong>Opera&nbsp;9.64</strong>
and <strong>Safari&nbsp;4/Win</strong> both show plenty of errors too.
</p>
<h2>Further study</h2>
<p>
There was a fascinating discussion within the Mozilla engineering group concerning this problem, which you can
tune in to on <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=63336"><strong>this&nbsp;page</strong></a>.
I do not claim to understand these guys, but wish I could.
</p>
<br />
<p class="small alignright">
<a href="design/index.html"
title=" Big John's Advanced CSS Design "><strong>Big John Design</strong></a>
&nbsp;
<a href="https://github.com/DerOperator/PositionIsEverything/issues">Contact Us</a>
&copy;positioniseverything.net<br />
Last updated: June 20, 2009<br />
Created March 7, 2003
</p>
<br />
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39235363-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Something went wrong with that request. Please try again.