IntersectionObserver: Browser Support, Features, Issues

What is IntersectionObserver?

IntersectionObserver is a JavaScript API standardized by the W3C that watches when a target element crosses into or out of a chosen viewport or ancestor element. The constructor takes a callback and an options object, and the browser fires the callback whenever the target's visibility crosses one of the configured thresholds.

Which browsers does IntersectionObserver support?

IntersectionObserver works in every modern browser, including Chrome, Edge, Firefox, Safari, Opera, and Samsung Internet. Internet Explorer is the only major browser that never added support.

What are the key features of IntersectionObserver?

IntersectionObserver gives you asynchronous, batched callbacks tied to the browser's render pipeline, plus configurable visibility thresholds that fire only when the target crosses them.

• Asynchronous, batched callbacks: The browser groups intersection updates and delivers them on its render path, so the callback never blocks the main thread the way scroll listeners do.
• Configurable thresholds: The threshold option accepts a number or array of values from 0 to 1 representing how much of the target must be visible before the callback fires.
• Custom root element: The root option lets you measure intersection against any scrollable ancestor instead of the viewport, which is useful for nested scroll containers and modals.
• Root margin offsets: The rootMargin option grows or shrinks the intersection rectangle in CSS-style units, letting you trigger callbacks before the target reaches the visible edge.
• Per-entry visibility data: Each IntersectionObserverEntry exposes isIntersecting, intersectionRatio, intersectionRect, boundingClientRect, rootBounds, target, and time for fine-grained reactions.
• Multi-target observation: A single observer can watch many targets, and the observe, unobserve, and disconnect methods control the watch list at runtime.

What are the use cases of IntersectionObserver?

IntersectionObserver replaced expensive scroll-based visibility checks across the modern web stack and now powers a handful of patterns every team ships.

• Lazy loading images and iframes: Defer downloading offscreen media until the target gets close to the viewport, cutting initial page weight on image-heavy pages.
• Infinite scroll feeds: Observe a sentinel element near the end of the list and fetch the next page when it intersects, the pattern Twitter, Pinterest, and Reddit ship at scale.
• Scroll-triggered animations and reveal effects: Add CSS classes when sections enter the viewport, without listening for every scroll frame on the main thread.
• Video autoplay and pause: Start playback when a video clears a 50% threshold and pause when it leaves, the technique Facebook and TikTok use for inline video feeds.
• Sticky headers and progress indicators: Detect when a heading or section anchor crosses the top of the viewport to drive sticky UI state and reading-progress bars.
• Ad impression and engagement tracking: Confirm that an ad slot was actually visible for an IAB-compliant minimum duration before counting an impression.

How do you use IntersectionObserver in JavaScript?

Create an observer with a callback and an options object, then call observe on each target element. The browser invokes the callback every time a target crosses one of your thresholds.

• Pick a target element: Get a reference to the DOM node you want to watch with document.querySelector or any other selector.
• Define the options object: Set root (the scroll container or null for the viewport), rootMargin (CSS-style margins around the root), and threshold (a single value or array between 0 and 1).
• Write the callback: Receive an array of IntersectionObserverEntry objects and react based on isIntersecting and intersectionRatio.
• Construct the observer: Pass the callback and options to new IntersectionObserver and store the returned instance.
• Observe the target: Call observer.observe(target). When you no longer need updates, call observer.unobserve(target) or observer.disconnect() to release every target at once.

// Lazy-load images as they approach the viewport
const target = document.querySelector(".lazy-image");

const options = {
  root: null,                       // null means the browser viewport
  rootMargin: "0px 0px 200px 0px",  // pre-load 200px before the bottom edge
  threshold: 0.1,                   // fire when at least 10% is visible
};

const observer = new IntersectionObserver((entries, self) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      self.unobserve(img);          // stop watching after the swap
    }
  });
}, options);

observer.observe(target);

If the callback never fires, log entries inside it first; the observer is silent until at least one threshold is crossed, including the implicit 0 threshold on the very first paint.

What are the known issues with IntersectionObserver?

IntersectionObserver covers most visibility tracking, but a few edge cases trip up even experienced teams.

• Chrome background tabs do not fire callbacks: Chrome throttles intersection updates in inactive tabs, so the callback you expect on tab switch never arrives until the tab gets focus.
• Cross-origin iframes return null rootBounds: When an observer runs inside an iframe with a different origin, rootBounds is null to prevent leaking layout data, so you cannot measure absolute intersection rectangles.
• First fire happens on observe, not on intersection: The browser delivers an initial entry when you call observe, even if the target is not yet intersecting, so callbacks must check isIntersecting before reacting.
• trackVisibility (V2) is Chromium-only: The isVisible signal that ignores occlusion and visual effects ships only in Chromium-based browsers; Safari and Firefox do not implement it.
• Throttling on low-power devices: In my experience, mid-range Android devices delay intersection updates under heavy main-thread work, so an animation triggered at the 0.5 ratio can stutter or fire late on the first scroll.
• Polyfill performance trails native: The WICG polyfill restores support on legacy browsers but uses scroll and resize listeners under the hood, so it loses the main performance benefit of the native API.

Citations

All IntersectionObserver version numbers and platform notes in this guide come from these primary sources:

• MDN - IntersectionObserver: developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
• MDN - Intersection Observer API: developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• MDN - IntersectionObserver constructor: developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver
• MDN - IntersectionObserverEntry: developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry
• W3C - Intersection Observer Working Draft: w3.org/TR/intersection-observer/
• W3C - IntersectionObserver editor's draft: w3c.github.io/IntersectionObserver/
• web.dev - IntersectionObserver coming into view: web.dev/articles/intersectionobserver
• Chrome Platform Status - IntersectionObserver: chromestatus.com/feature/5163132190687232
• WICG - IntersectionObserver polyfill: github.com/w3c/IntersectionObserver
• Mozilla - Firefox 55 release notes: mozilla.org/en-US/firefox/55.0/releasenotes/