-
Notifications
You must be signed in to change notification settings - Fork 13
/
round-error.html
executable file
·229 lines (159 loc) · 6.51 KB
/
round-error.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!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 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 Explorer 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 9.64</strong>
and <strong>Safari 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 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>
<a href="https://github.com/DerOperator/PositionIsEverything/issues">Contact Us</a>
©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>