1 pixel of background repeat during zoom in Google Chrome

Question

I have faced really strange problem in google chrome (desktop and mobile). Here is jsfiddle example. If you zoom in till 500% you ll see green line at the top of the div. It seems that background image repeats itself. The green line is the bottom line of my background image, if I make background image bottom transparent the line it disappears. I added repeat-x in my css but it still repeats 1 pixel of my image:

background: url('') repeat-x;

Answer 1

Subtract 1px from everything, including the background x-position.

.red-div{
    background-color: red;
    height: 29px;
    width: 300px;
}

.child {
    width: 100%;
    height: 100%;
    background: url('') repeat-x;
    background-position:-1px 100%;

}

JSFiddle