I have noticed that Intersection Observer does not work properly in Edge in a very narrow circumstance: when the observed element is absolutely positioned with its css property right set to 0. The same problem does not arise when I open the page in Chrome or Firefox.

Either it's an Edge bug or (more likely) I'm using Intersection Observer wrong. If the latter, please correct me!

Here's sample code to show the issue:

The Javascript

const options = {
  root: null,
  threshold: 1,
  rootMargin: "0px"
};

const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-on');
    } else {
      entry.target.classList.remove('is-on');
    }
  });
}, options);

items.forEach(item => {
  observer.observe(item);
})

The HTML

<div class="item1" data-set="items">Item 1</div>
<div class="item2" data-set="items">Item 2</div>

The CSS

.item1, 
.item2 {
  position: absolute;
  top: 1000px;
  padding: 1rem;
  background-color: yellow;
  transition: all 1s;
}

.item1 { left: 0; }

.item2 { right: 0; }

.item1.is-on,
.item2.is-on {background-color: red; }

The Issue

When the webpage with this code is opened in Chrome or Firefox, the boxes both transition from yellow to red, as expected. When it is opened in Edge, the left box (which uses left: 0) transitions to red but the right box (which uses right: 0) does not. I don't know why.

Oddly, if I use right: 1px (or something more than 0), the right box also transitions as expected.