Background center with chrome (bug)

2019-03-16 06:06发布

问题:

I have a background image centered that Chrome displays offset by one pixel.

CSS

#container { 
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    width: 100%
}
#header {
    width: 986px;
    margin: 100px auto 0 auto;
}

HTML

<html>
<body>
    <div id="container">
        <div id="header">centered content</div>
    </div>
</body>
</html>

I guess it has to do with how different browsers handle the center -or 50%- property of the background in CSS:

Is there a known (simple) hack or alternative method to fix this? Background container has to be 100% wide.

回答1:

For me, this did the trick:

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

I will post the link for this solution as soon as I find were I got it from a few days ago. In the same post, the guy said the problem was with odd or even number for container width. Anyway, this fixed the problem in my case.



回答2:

If you can output your image wider than the browser window, that should fix it.

If found that solution here - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/



回答3:

If you make the background image width an odd number (987px) the positioning will be consistent across all browsers. It seems counter-intuitive but that seems to always fix the issue for me without any CSS hacks.



回答4:

Is the image actually 986px? The easiest way I found to fix it is to make sure the width of the image is an even number.

Another thing you could do is add a 2px buffer (to keep the width an even number) in the background image to account for that shift. It shouldn't shift your image as viewed in the browser as long as you add a px to each side to keep it all even.



回答5:

Try resizing the browser to see how it works... we are talking about pixels here, and if the window has a even width it's ok, otherwise a pixel has to be lost somewhere i guess.



回答6:

I suppose the backgroud image is also 986 pixels wide? Then this effect should also be visible on the left side, turned around though.

I suggest to remove the background image from the container and add it to the header:

#container {
    width: 100%;
}
#header {
    width: 986px;
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    margin: 100px auto 0 auto;
}


回答7:

I used the following bit of CSS to fix the problem on webkit. If JS isn't enabled, it works on the assumption that the browser will probably be full screen, so the viewport width on webkit will be an odd number

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html {
        margin-left: 1px;
    }
    html.evenWidth {
        margin-left: 0px;
    }
}

JavaScript (jquery)

$(document).ready(function {
var oWindow = $(window),
htmlEl = $('html');

function window_width() {
    if(oWindow.width() % 2 == 0) {
        htmlEl.addClass('evenWidth');
    } else {
        htmlEl.removeClass('evenWidth');
    }
}

$(document).ready(function(){
    window_width();
    $(window).resize(window_width);
});