IntersectionObserver with root:document does not invoke the callback when the target intersects with the root intersection rectangle. When the intersection root is a document, the root intersection rectangle is the document's viewport. When a target intersects with the viewport the observer's callback should be invoked, but it is not. Steps to reproduce: 1: open the following codepen: https://codepen.io/johannesodland/pen/mdRqdxE 2: scroll to the bottom. Expected result: Callback is invoked and background-color of footer/target should be green. What went wrong? Callback is not invoked and background-color of footer/target is red. Both Firefox and Chrome invokes the callback. Safari now passes the suggested feature-detection for document as intersection root (https://github.com/w3c/IntersectionObserver/issues/372), but fails to invoke callbacks when target is intersecting.
This example works perfectly for me in Safari in Big Sur and in STP 123.
Created attachment 425514 [details] Screen shot of failing test It fails in Versjon 14.0.3 (16610.4.3.1.7) on Big Sur 11.2.3 (20D91)
Could you try Safari Tech Preview?
(Also I assume you don't have JS disabled)
It seems to be working fine in STP :) I have JS enabled in Safari. The callback triggers if target is in the viewport when IntObs is instantiated. (Set target height to less than 100vh in the example) The bug got reported on one of our components and I was able to reproduce it. I then recreated it in the example I provided.
I think http://trac.webkit.org/changeset/257976/webkit fixed this *** This bug has been marked as a duplicate of bug 208047 ***
Any suggestions on how to improve the feature-detection? This version of Safari passes the suggested feature-detection, but the implementation is broken. https://github.com/w3c/IntersectionObserver/issues/372#issuecomment-577855647