IntersectionObserver

by Ali Juma (​ajuma@chromium.org)

• Goal: find out if an element is visible
  • Fully visible?
  • Partially visible?
  • Entirely offscreen?
  • Sites do this with JS with bounding boxes over and over again
• API Overview
  • var observer = new InstesectionObserver(callback, options);
  • Options:
    • root: Interseection with respect to an element or if null the viewport
    • threshold: what fraction of intersection triggers notfication
  • observer.observe(target)
• Implementation Challenges
  • Lifetime management
    • The observer and its callback need to live as long as there are targets to observe.
      • Even if the observer no longer has any JS references
    • The callback will keep the document alive.
      • It’s easy to accidentally keep the document alive indefinitely
  • Lack of Event Loop support
    • HTML EventLoop
      • ​https://webkit.org/b/160711
      • ​https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8
    • Blink and Gecko schedule rAF in-sync with “updating the rendering” (that is, producing a frame)
      • Any setTimeout call during rAF is guaranteed to fire after style/layout/paint for producing a frame
    • IntersectionObserver WPTs depend on this model
      • So do other WPTs