q-intersection examples seem to be not working

[pikil]

Hi There,
Just a quick update that the examples behave odd for q-intersection:
https://quasar.dev/vue-components/intersection#QIntersection-API

When visit Codepen from the links provided in Docs the displays are empty (there is a split second content load on the initial page render, though).

For recreating, just try to follow to Codepen from the first two examples in docs to see that empty screen.

Checked on Google Chrome, Firefox and Safari.

Cheers!

[rstoenescu]

Seems to only happen in Codepen. Verified the UMD version and no issues with it.

[hawkeye64]

Intersection observer won't work in an iframe (and codepens run in an iframe). We should probably document this.
w3c/IntersectionObserver#372

However, on this page: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
It states:

If one of the containing elements is the root of a nested browsing context
(such as the document contained in an <iframe>, the intersection rectangle
is clipped to the containing context's viewport, and recursion upward through
the containers continues with the container's containing block. So if the top
level of an <iframe> is reached, the intersection rectangle is clipped to the
frame's viewport, then the frame's parent element is the next block recursed
through toward the intersection root.

[rstoenescu]

Enhanced by #7861
Changes will be available on next docs deployment.

Thanks to both of you!