IntersectionObserverは不完全なのか

Question

画面に要素が入ったら赤色から黄色に変えます
スクロールを勢い良くすると黄色にならず赤色で残ったりします
これはなぜでしょうか
原因の分かる方いらっしゃいませんでしょうか

<style>
body,html{
height:100%;
}
</style>

<div id="aaa" style="height:100%;overflow:scroll">
<div id="a1" class="a" style="height:20%;background:red"></div>
<div id="a2" class="a" style="height:20%;background:red"></div>
<div id="a3" class="a" style="height:20%;background:red"></div>
<div id="a4" class="a" style="height:20%;background:red"></div>
<div id="a5" class="a" style="height:20%;background:red"></div>
<div id="a6" class="a" style="height:20%;background:red"></div>
<div id="a7" class="a" style="height:20%;background:red"></div>
<div id="a8" class="a" style="height:20%;background:red"></div>
<div id="a9" class="a" style="height:20%;background:red"></div>
<div id="a10" class="a" style="height:20%;background:red"></div>

</div>



<script>
window.onload=function(){


 let options = {
        root: document.querySelector("#aaa"),
rootMargin: '0px 0px 100px 0px',
        threshold: 0
      }

      const observer = new IntersectionObserver((entries) => {
tid=entries[0].target.id;
        if (entries[0].intersectionRatio != 1) {
document.getElementById(tid).style.background="yellow";
}
      }, options);


      s = document.querySelectorAll('.a');
      sl = s.length;
      for (i = 0; i < sl; i++) {
        observer.observe(s[i]);
      }
}
</script>

Answer 1

原因は2つあるように思います。

ひとつめは、entries[0]にしかアクセスしていないことです。
entries[1] entries[2] などの要素を処理していないので、漏れが生じるのだと思います。

ふたつめは、height:20%とrootMargin: '0px 0px 100px 0px'です。要素が10個あってheight:20%ですから、合計で200%の高さです。
とすると、親要素がどのようなスクロール位置でも隠れること（intersectionRatio != 1）が起きない要素が存在しえます。