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

admin管理员组

文章数量:1315335

If you open this page .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: /

If you open this page https://bug63336.bugzilla.mozilla/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/4aMsx/2/

• javascript
• css
• firefox

Share Improve this question Follow edited Sep 16, 2011 at 9:11 Polar asked Sep 16, 2011 at 7:20 PolarPolar 12111 silver badge44 bronze badges 1

• Yeah, IE8 seems ok, but IE7 does produce the error though. – Polar Commented Sep 16, 2011 at 7:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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/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/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.

I am not too sure if this will help. But its worth a try. have a look at this web site. CSS Browser Selector. They use CSS as well as javascript to target browsers for specific problems.

I'm dont know how FF fix this problem, but adding CSS style border: 1px solid black; into #wrapper div CSS style rule workarround this problem in all browsers: Chrome, IE7, Opera, Safari.

#wrapper div {
  position: absolute;
  background: black;
  border: 1px solid black;
  width: 20%;
  height: 20%;
}

本文标签： javascriptHow to fix the subpixel error the way Firefox doesStack Overflow