iPhoneのsafariでインライン要素の隣に謎の空白が生まれる

とあるサイトの運営をしているのですが、最近safariで色つき文字の横に空白があるのに気付きました。
インライン要素の隣に発生するらしく、ページの右に行くほど空白が大きくなるようです。
marginやpaddingを0にしても変わらず、letter-spacingやfont-family等色々試してみましたがダメでした。
解決方法をご存知の方おられましたら、恐れ入りますがご指導のほど宜しくお願い致します。

▼参考ページ
https://dl.dropboxusercontent.com/u/41623443/test.html

▼再現環境
・iPhone6s
iOSバージョン：9.3.4
ブラウザ：Safari

・iPhone5s
iOSバージョン：9.2
ブラウザ：Safari

▼参考画像

▼ページソース

<!DOCTYPE html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="Shift-JIS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>

<div style="font-size:16px;">
	<span style="color:#ff0000;">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキストテキストテキストテキストテキストテキストテキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキストテキストテキストテキストテキストテキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキストテキストテキストテキストテキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキストテキストテキストテキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキストテキストテキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキストテキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキストテキスト</span>テキスト<br>
	<br>
	<span style="color:#ff0000;">テキスト</span>テキスト<br>
	<br>
	<br>
	<br>
	テキストテキストテキストテキストテキストテキストテキストテキストテキスト<span style="color:#ff0000;">テキストテキストテキストテキストテキストテキスト</span>テキスト<br>
	<br>
	テキストテキストテキストテキストテキストテキストテキストテキストテキスト<span style="color:#ff0000;">テキスト</span>テキスト<br>
	<br>
	テキストテキストテキストテキストテキストテキストテキストテキスト<span style="color:#ff0000;">テキスト</span>テキストテキスト<br>
	<br>
	テキストテキストテキストテキストテキストテキストテキスト<span style="color:#ff0000;">テキスト</span>テキストテキストテキスト<br>
	<br>
	テキストテキストテキストテキストテキストテキスト<span style="color:#ff0000;">テキスト</span>テキストテキストテキストテキスト<br>
	<br>
	テキストテキストテキストテキストテキスト<span style="color:#ff0000;">テキスト</span>テキストテキストテキストテキストテキスト<br>
	<br>
	テキストテキストテキストテキスト<span style="color:#ff0000;">テキスト</span>テキストテキストテキストテキストテキストテキスト<br>
	<br>
	テキストテキストテキスト<span style="color:#ff0000;">テキスト</span>テキストテキストテキストテキストテキストテキストテキスト<br>
	<br>
	テキストテキスト<span style="color:#ff0000;">テキスト</span>テキストテキストテキストテキストテキストテキストテキストテキスト<br>
	<br>
	テキスト<span style="color:#ff0000;">テキスト</span>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
	<br>
	<span style="color:#ff0000;">テキスト</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
</div>

</body>
</html>