What is the meaning of "target element is not a descendant of root"?

Question

I got the following warning in the Chrome's console: "IntersectionObserver.observe(target): target element is not a descendant of root."

What is the meaning of this? How could I find the reason for it, in order to fix it?

Answer 1

This warning appeared for me too. Chrome Debugging tool did not like an attribute in an element. I found the offending attribute by cutting out chunks of html and reloading the page until I narrowed it down to a single attribute.

for me it was this muted attribute...

Hope this helps.

Answer 2

I got this warning when I was creating a HTMLVideoElement in JS, but not adding it to the body of the document, before playing it to extract the first frame image.

I worked around it by setting its display to none, appending the node as a child of the body, and in a later promise removing the element from the body.

So, I'd check if you're creating any DOM elements in JS, and not adding them to the body of the HTML document.