スマートフォンサイト制作で、要素と要素の繋ぎ目に謎の境界線が出来る場合の対応

※機種依存と開発手法を含む超レアなケースです

CSSで背景画像を使った領域を使った場合に、要素と要素の繋ぎ目に意味不明な境界線が発生した不具合でハマったので、原因（と思われる事）とその解決方法。
今回の現象はXperiaだけで発生（AndroidOSのバージョン関係無し）という非常に稀なケースでした。

どんな感じなのかはサムネイルの画像参照

CSS定義はこんな感じ

.line_wave05　{
　background: transparent url("画像パス") repeat-x 0 0;
　background-size: 25px 9px; /*画像サイズの半分*/
　height: 9px;
}

根本的な原因は背景画像をbackground-size でリサイズする事による画像描画のゆらぎのせいだと思われます。

現在のプロジェクトの画像の扱いが、Retina解像度対応の為に、640px幅の画像を用意し、CSSで半分サイズにリサイズして配置する手法をとっていたのですが、
どうやら画像を半分にリサイズして画面に描画する際に、端末毎にゆらぎの様な差異が発生するらしいです。

背景画像を消す事で謎の境界線も消えたので、他のスタイルに依存してるわけではないみたい。
（iPhoneは意識しなくてもよいが、Android端末はそれぞれで画面サイズ。解像度に差異がありすぎて綺麗に画像が出ないパターンんがよくあるが、それが顕著に出た形だと思われる）

解決方法としては、領域ピッタリに画像を配置するのを辞めて、領域よりもすこし大きめに背景画像を準備し、境界線に当たる部分を表示領域の外に出して誤魔化す事で無事に解決しました。

.line_wave05{
 /*Xperiaでbackground-sizeの変更時の画像レンダリングのゆらぎで変な境界線が入るので、
 ここだけ画像を領域よりも大きめに準備してます*/
 background: transparent url("画像パス") repeat-x 0 0;
 background-size: 25px 10px; /*←背景画像を領域よりも大きく*/
 height: 9px;
}

ほんと、もう。Androidにはやられたい放題です。