It looks like IntersectionObserver never considers elements with display: contents in the viewport.

This behaviour makes sense for display: none but I find it counter-intuitive for display: contents.

The use case of having a clean wrapper which only fetches & renders its contents on viewport intersection seems valid to me.

Example

function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      document.getElementById('content').style.display = 'block';
      document.getElementById('loader').style.display = 'none';
    }
  });
};

const observer = new IntersectionObserver(callback);

const target = document.getElementById('wrapper');

observer.observe(target);

#wrapper {
  display: contents;
}

#content {
  display: none;
}

<div id="wrapper">
  <div id="loader">Loading...</div>
  <div id="content">Shown on viewport intersection</div>
</div>

Looking at the Mozilla docs I can see that:

These elements don't produce a specific box by themselves

But still I'd expect IntersectionObserver to be able to detect it.

So guess it's a 2 part question:

• Is this indeed the intended behaviour or an unwanted side-effect?
• If it is the intended behaviour - what are the proper use-cases for display-contents?