1 piksel powtórzenia tła podczas powiększania w Google Chrome

Question

Napotkałem naprawdę dziwny problem w Google Chrome (komputer i telefon). Oto jsfiddle example. Po powiększeniu do 500% zobaczysz zieloną linię u góry div. Wygląda na to, że obraz w tle powtarza się. Zielona linia jest dolną linią mojego tła, jeśli sprawię, że obraz tła będzie na dole przezroczysty, a linia znika. Dodałem repeat-x w moim css ale wciąż powtarza 1 piksel mojego obrazu:

background: url('') repeat-x; 

Answer 1

Zmniejsz 1px od wszystkiego, w tym tle X-pozycji.

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

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

} 

JSFiddle