I am encountering an issue with my IntersectionObserver that is observing an img. It works perfectly when the root is set to null (viewport). However, as soon as I change the root element to another img, the observer fails to detect the intersection between the two. After spending hours debugging this problem, I have decided to reach out to the community for assistance.
You can find the code in this file from the public repository: here
For better visibility, here is the code:
<template>
<section
id="scene"
class="flex flex-col content-center justify-center items-center mt-16"
style="height: calc(100% - 4rem)"
>
...
// code continues here
...
</section>
</template>
...