Changer une méthode forEach () en une boucle For à utiliser avec IntersectionObserver-Javascript

J'ai le code IntersectionObserver suivant qui fonctionne comme un déclencheur de défilement pour les animations sur un site qui fonctionne bien.

Cependant, je voudrais changer la méthode forEach() qui fonctionne comme appel pour IntersectionObserver en une boucle for, mais je ne peux pas le faire fonctionner.

Je suis sûr que cela peut être fait, mais cela me rend un peu fou.

La raison de vouloir cela est parce que j'utilise un polyfill pour que IntersectionObserver fonctionne dans les anciennes versions d'IE et Edge, mais bien sûr la méthode forEach() ne fonctionne pas dans ces navigateurs.

J'ai commenté ma tentative de boucle au bas du code.

Toute aide serait incroyable.

Codepen: https://codepen.io/emilychews/pen/xJaZay

window.addEventListener("load", function(){
  
var iO = "IntersectionObserver" in window; /* true if supported */
var box = document.querySelectorAll('.box');
  
if (iO) {
  const config = {
    root: null, // sets the framing element to the viewport
    rootMargin: '0px',
    threshold: .5
  };
    
  let observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(item) {
      
      if (item.intersectionRatio > .5) {
        
        item.target.classList.add("active");

      } else {
        item.target.classList.remove("active");
      }
      
    });
    
  }, config);

  box.forEach(function(item){
    observer.observe(item);
  });

  // for (i = 0; i < box.length; i++) {
  // observer[i].observe(item);
  // }
  
} // end of if(iO)
  
}); // end of load event

body {
  font-family: arial;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 280vh;
}

.box {
  position: relative;
  margin: 1rem 0;
  width: 100px;
  height: 100px;
  background: blue;
  opacity: 1;
  transition: .5s all;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

#box1{
  margin-bottom: 100px;
}

.active {
  background: red;
  opacity: 1;
}

<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>