Android 標準ブラウザで動的にDOM操作したときにCSS隣接セレクタが適用されないバグ

CSSの隣接セレクタにバグがあるもよう。
静的なhtmlでは問題ないようだが、class属性を動的に変更した場合などはうまく適用されないようだ。

<a class="btn">Class属性変更するボタン</a>
<div class="block-a">A</div>
<div class="block-b">B</div>

//jQuery使用
$('a.btn').on('click', function(){
  $('.block-b').after('<div class="block-c">C</div>'); //Bブロックの後にCブロックを挿入
  $(this).addClass('add');
});

a.btn ~ .block-a {
  /* 赤字になる */
  color: #f00;
}
a.btn.add ~ .block-b {
  /* 赤字にならない */
  color: #f00;
}
a.btn.add ~ .block-c {
  /* 赤字になる */
  color: #f00;
}

ちなみに、CのブロックをBのブロックより前に挿入すると、a.btn.add ~ .block-bが適用され、Bブロックは赤字になる。

//jQuery使用
$('a.btn').on('click', function(){
  $('.block-b').before('<div class="block-c">C</div>'); //Bブロックの前にCブロックを挿入
  $(this).addClass('add');
});

この現象から考えると、div.block-bの親要素から見た子要素の順番が変わったことに伴って、当該要素に適用されるスタイルを再評価したためだろう。
一方、a.btnのclass属性が変更されただけでは、div.block-bはスタイル再評価の対象にならない。おそらくは、a.btnの直系先祖と直系子孫および隣接兄弟の要素のみが再評価されていると推測される。

まぁ、何にせよバグである。

現象を確認した端末

IS06 Android2.2.1
GALAXY S2 4.0.4