Unwanted border around background image div

问题

I am getting a slight line or border around my background image. I am dynamically changing the height of the parent div via javascript so that the inner div (which has the background image set) will "stick" to the bottom of the window.

No line appears on the desktop browsers, but on the mobile browser after the script runs, there is usually a thin border around it:

The border is on the left and the way it should be is on the right. Any suggestions?

This is the script:

<script type="text/javascript">
function layoutHandler(){
    if(window.innerHeight > 1061){
    var newsize = 150 + (window.innerHeight - 1061);

        document.getElementById("footerwrapper").style.height = newsize+'px';
    }
    else {
        document.getElementById("footerwrapper").style.height = '150px';
    }
}
window.onload = layoutHandler;

window.onresize = layoutHandler;
layoutHandler();
</script>

And then the inner div is setup like so:

#inner {
    background-color: #FFF;
    padding: 0px;
    height: 150px;
    bottom: 0px;
    width: 100%;
    position: absolute;
    background-image: url(Images/grad.png);
    background-repeat: repeat-x;
}

Edit: Okay, after testing this a bit more I narrowed down when it happens. (This might get frustratingly specific) It happens most noticeably on the iPad in portrait mode. I turned off the "repeat-x" and it goes away completely. That led me to try a much wider background image which would not be repeating within the width of the iPad and it took away this issue. Any ideas why the heck this is happening?

回答1:

I had the same problem and removing repeat-x solved it. I think it is bug of phone browsers.

来源：https://stackoverflow.com/questions/16218370/unwanted-border-around-background-image-div