He notado que Intersection Observer no funciona correctamente en Edge en una circunstancia muy limitada: cuando el elemento observado está absolutamente posicionado con su propiedad css a la right establecida en 0 . El mismo problema no surge cuando abro la página en Chrome o Firefox.

O es un error de Edge o (lo más probable) estoy usando Intersection Observer de forma incorrecta. Si es esto último, por favor, ¡corrígeme!

Aquí hay un código de muestra para mostrar el problema:

El 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); })

el html

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

el 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; }

La cuestión

Cuando se abre la página web con este código en Chrome o Firefox, los cuadros cambian de amarillo a rojo, como se esperaba. Cuando se abre en Edge, el cuadro de la izquierda (que usa left: 0 ) cambia a rojo, pero el cuadro de la derecha (que usa right: 0 ) no lo hace. no sé por qué

Curiosamente, si uso right: 1px (o algo más de 0 ), el cuadro de la derecha también cambia como se esperaba.