Android 端末の Mobile Safari で select ボックスの選択が反映されない

Android 端末の Mobile Safari 上で select ボックスの選択が反映されない問題がありました。内部的には選択されたことになっているのですが、ブラウザの描画が行われていない状態でした。

style 属性の display プロパティを (block|none) の切替でエレメントを表示/非表示するような javascript を組んでいたのですが、あらかじめ HTML ソース上で display:none で非表示にしているブロックを display:block に変更して select ボックスを表示させた場合、この現象が発生することが分かりました。

以下のコードでは、display:block に切替後に select ボックスが表示されても選択変更が描画されません。

<script>
window.onload = function() {
    document.getElementById('selectBlock').style.display = 'block';
}
</script>
...
<div id="selectBlock" style="display:none">
<select name="rgb">
  <option value=""></option>
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
</div>

この症状は、初回の display:block 切替時のみで、その後に none > block と再表示した場合は発生しません。

色々と試してみた結果、.style.display 値の変更ではなく、setAttribute メゾッドで style 属性を変更すると解決しました。

window.onload = function() {
    document.getElementById('selectBlock').setAttribute(
        'style', 'display:block'
    );
}

同じ Apple WebKit でも iOS の Mobile Safari では発生せず、Android 実機と AVD Manager によるシュミレータの両方で同じ症状が発生しましたので Android OS 上のバグか仕様のようです。