Tengo entendido que IntersectionObserver v2 en Chrome debería informar si un iframe es realmente visible y nada lo cubre. Así que creé un caso de prueba simple:
principal.html
<!doctype html> <html><head></head> <body> <div style="background-color: green; width: 200px; height: 200px; position: absolute;">Test</div> <iframe style="width:100px; height: 100px; border: 0;" scrolling="no" src="https://other.domain/inner.html"></iframe> </body></html>Y aquí está otro.dominio/interior.html:
<body style="margin:0"> <div id="test" style="width:100px; height:100px; background-color: purple;"></div> <script> const cb = (entries) => { entries.forEach((entry) => { console.log( 'isIntersecting:', entry.isIntersecting, 'isVisible:', entry.isVisible ); }); }; const observer = new IntersectionObserver(cb, { threshold: 0.0, root: null, trackVisibility: true, delay: 100, }); setTimeout(() => { const el = document.getElementById('test'); observer.observe(el); }, 100); </script> </body>setTimeout es para simular un script que tarda un tiempo en cargarse en el navegador.
Si setTimeout no está presente, obtengo resultados inconsistentes en la carga de la página.
Algunas veces solo veo:
isIntersecting: true isVisible: falseQue es lo que esperaría.
Pero la mayoría de las veces veré dos líneas:
isIntersecting: true isVisible: true isIntersecting: true isVisible: falseY no entiendo de dónde viene esa primera línea verdadero/verdadero. Supongo que la segunda línea es después del retraso de 100 ms, pero ¿por qué debería devolver isVisible true?
Pero cuando agrego el tiempo de espera. Todo lo que veo es la línea verdadero/verdadero y no puedo hacer que aparezca la otra línea:
isIntersecting: true isVisible: trueEso obviamente no está bien. El iframe está cubierto por un gran cuadrado verde.
Curiosamente, si coloco el iframe más abajo en la página y lo desplazo hacia la ventana gráfica, se comporta exactamente como esperaría. Parece suceder solo en la carga inicial o en la actualización.
Cualquier ayuda y comprensión que pueda proporcionar sería muy apreciada.