【未解決】background-image でスマートフォンだけ隙間が空く

背景画像を用意し、コンテンツの背景画像として設定しました。 スマートフォン用に作った背景画像で、
小さい画像を縦方向にリピートしています。
コードは以下の通りです。
※スマホとPCで背景画像を変えているため、
　今回は@media screenを記述しています。
　検証環境はiphone XS の Safariです。

@media screen and (max-width: 640px) {
    .concert-wrapper {
        display: block;
        background-image: url(images/qbackground.png);
        background-repeat: repeat-y;
        background-position: center;
        margin: 0px 20px;
    }
}

このコードだと、以下の画像のように背景に隙間が空きます。

背景画像の間に隙間

試したこと

background-size: contain を入れてみる

結果変わらず。

line-height: 0; を入れてみる

いろいろと調べていたところ、下記のページを発見。

意図せぬ謎の余白ができた時、余白を削除するために試してみるCSSNatsukiMemo なつきメモ

参考にして、line-height: 0;を入れてみると、、、
Chromeのデベロッパーツールでは改善された気がしましたが、
実際にiPhoneで見ると表示は変わらず。

【結果】2019/07/04、未解決……

今回、スマホ版の背景画像はliner-gradientで対応できましたので
そちらでコーディングすることにしました。
引き続き、解決しそうな方法を見つけ次第、試してみたいと思います。
（アドバイス等、ありましたらお願いしますmm）