How to fix the sub-pixel error the way Firefox does?

Question

If you open this page https://bug63336.bugzilla.mozilla.org/attachment.cgi?id=114574 and try resizing your browser window you should see lines across the black box in any browser other than Firefox. That is due to the sub-pixel error and browsers handle it in different ways. Firefox rounds sub-pixels in such a way that you should see no lines across that black box, but other browsers, namely Opera, Safari, IE, and Chrome, do not fix the sub-pixel problem. So, I would like to learn ways (JavaScript ways, for instance) I could round sub-pixels to fix the sub-pixel error, as Firefox does.

EDIT:

Here's one more example that produces this problem in all browsers other than Firefox: http://jsfiddle.net/4aMsx/2/

Answer 1

You can't fix it the way Fx does it, but you can try from the other side.

Why are thee gaps there? Because of the rounding errors. So, we must ensure that there'd be no rounding errors. How'd be do that? At first, we'd divide all the space we have and then multiply the inner element, so we'd get the situation where the rounding error occurs on the parent and all the children in this context would be ok.

There is a fixed example from the bugzilla: http://jsfiddle.net/2tmjw/

I've added a wrapper with the following styles:

#wrapper4wrapper {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 8%;
    height: 8%;
}

And changed the original wrapper to be

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    height: 1000%;
}

You can see it in action while resizing the window or the fiddle frame. You can notice that the width of the wrapper is changing by steps: it's where all the rounding errors go.

If you wish to still center a page, you can try something like this: http://jsfiddle.net/2tmjw/1/ — but with absolute positioning it's somewhat hard to position it ideally in center. But when it's not absolute positioned and you need to position it horizontally, you can use display: inline-block with text-align: center or display: block with margin: auto.

Also, the ratio of the parent's shrinking and the children's expand must be chosen from what parts you want to divide the children. The more precise you want them to be, the less width would the parent have, but the steps would grow too.