javascript - Google Chrome でズーム中に背景の 1 ピクセルが繰り返される

Question

Google chrome (デスクトップとモバイル) で本当に奇妙な問題に直面しました。これがjsfiddleの例です。500% まで拡大すると、div の上部に緑色の線が表示されます。背景画像が繰り返されるようです。緑色の線は背景画像の一番下の線です。背景画像の下を透明にすると、線が消えます。css に repeat-x を追加しましたが、それでも画像の 1 ピクセルが繰り返されます。

background: url('') repeat-x;

Answer 1

背景の x 位置を含め、すべてから 1px を引きます。

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

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

}

JSFiddle