Description
IntersectionObserver allows us to detect whether an element is within the viewport, but that still doesn't guarantee that it is actually visible. It's possible that the element might have some other element overlayed over it, via CSS position: absolute, fixed etc, rendering it not visible or only partially visible to the user. If the overlaying element is from a different domain than the target element, there's currently no way to detect it from within the scope of the target element.
In advertising jargon this is called "ad stacking", where an ad or other element is placed over the top of another ad so as to get paid for an ad impression that was never seen by the user.
My suggestion for how to add detection for this scenario without giving away too much cross-domain info is to add another property to the IntersectionObserverEntry called visiblePixels: [number]. It should be a count of the total number of pixels belonging to the target element that are visible, i.e. are within the viewport AND have no overlaying element blocking them from view. So if the element is completely visible the visiblePixels would be equal to [intersectionRect.width * intersectionRect.height].
As an example, say the target element is 100x100px, is fully within the viewport, but there is a 100x50px element overlayed on top of it, the visiblePixels would be [(100 * 100) - (100 * 50) = 5000]
Alternatively, we could put a list of overlaying rectangles inside each IntersectionObserverEntry as an array of IntersectionObserverEntry's, then let js client calculate how much of his target element is overlayed. But this gives us a bunch of extra cross-domain information that we (in advertising-land) really don't care about: the number and shape of overlaying elements, and also pushes more calculation onto the js side, when we really only want to know how much of our target element is visible.