These days I noticed something quite interesting in rendering DOM elements by a sample browser. In my case this was Firefox, but whatever the browser was this happens always.

Let me explain you what was the case. I have to render 200 DIV elements, each with 2 pixels width and 30 pixels height. Thus you got something like a scale.

So far so good. The problem is that if you get some random width for the scale as the browser can be resized. If you’d like something like random space (gap) between the scale bars you get something like 7,35 pixels between every two bars.

Of course the browser cannot use non integer pixels so it starts to render gaps which are 7 pixels wide and in every few pixels it renders 8 pixel single gap. Thus he corrects this problem.

My advice is – don’t make the browser think and round the pixels. Use fixed integers to make browser flow faster. You can fix the whole width to be multiple of 200 pixels which is the number of bars.