Geek Answers Handbook

Why is there a 1px rounding error when centering images and how to get around it?

It's best to see this, so check out this fiddle:

https://jsfiddle.net/6rc4zzcv/1/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Test</title>
        <style type="text/css">
            #container
            {
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAADICAMAAACHxIozAAAABlBMVEUAAAD///+l2Z/dAAACq0lEQVR42u3VQQ0AMAzEsHX8OXcoWuk0G0I+uQUAxLsHAIhn6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChAwCGDgCGDgAYOgBg6PCtXqAyGDowrcZpDIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6AGDokKfHaQyGDkyrBSqDoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChSwAAhg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDALEeYdfPYfw5pLEAAAAASUVORK5CYII=');
                background-position: center top;
                background-repeat: no-repeat;
                min-width: 302px;
                background-color: yellow;
                border: 1px solid blue;
            }
            #centerbox
            {
                width: 300px;
                height: 300px;
                border: 1px solid lime;
                margin: auto;
                position: relative
            }
            #floater
            {
                position: absolute;
                top: 50px;
                left: 101px;
                width: 98px;
                height: 98px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="centerbox">
                <div id="floater"></div>
            </div>
        </div>
    </body>
</html>

When resizing the browser window (or just the script output window), sometimes the red square remains exactly in the black frame, and sometimes in the 1px space. I checked this in Chrome and IE11. IE11 seems to be trying to display a "half-pixel", so it is less noticeable, but still there. Curiously, if the background image is smaller than the viewport, this does not happen.

I can imagine the reason for this effect (the centering code is duplicated in two places, for the background and for the fields and uses different rounding methods), but how to get around it?

, , .

+4
2

jsFiddle

, , , Chrome (, , ) .

, , 2000 ; 200px- , , ,

#bg{ /* I'm inside the parent */
    position:    relative;
    background:  url("2000x200image.jpg");
    width:       2000px;
    height:      200px;
    left:        50%;     /* center left edge */
    margin-left: -1000px; /* -half width */
}

, ! , .

HTML:

<div id="container">
    <div id="centerbox">
        <div id="bg"></div>
        <div id="floater"></div>
    </div>
</div>

CSS

#container{
    min-width: 302px;
    background-color: yellow;
    border: 1px solid blue;
    overflow:hidden;
}
#bg{
    position:relative;
    width:2000px; /* same as your image size */
    height:200px;
    /* center element instead of image! */
    left: 50%; 
    margin-left:-1000px; /* -half width */
    background: url('data:image/png;base64,iVBORw0KG...=');
}
#centerbox{
    width: 300px;
    height: 300px;
    border: 1px solid lime;
    margin: auto;  
    position: relative;
}
#floater{
    position: absolute;
    top: 51px;
    left: 101px;
    width: 98px;
    height: 98px;
    background-color: red;
}
+1

, . - . Google . . , , , . , , , , , , .

0

More articles:


All Articles