[BUG] useScroll() with container option behave strangely

[QzCurious]

Describe the bug

I set container for useScroll() AND if there is some element before container. useScroll() would be affected and looks like it is working.

Codesandbox and how to reproduce

The reproduction is a tweaked version from track-element-position.
The tweaks:

1. I add a container in #58948A with fix height and overflowY: "auto" to make it scrollable.
2. To get Item the container, I use react Context (ContainerRefContext)
3. A div in #21434E just to simulate the scenario

Please comment/un-comment the #21434E div to see how different useScroll() behaves.
With no other element before the container, the progress is filled. But if there are elements taking space before container, the progress would not able to be filled.

It's easier to explain it by video.

e9f5baf9-8ac6-488f-bb17-b3a72aa023bb.mp4

04f3179f-9337-4797-a801-f255d251baf1.mp4

Expected behavior

useScroll() should not be affected by what other elements placed on the docuemnt.

Environment details

Windows 10 21H2
chrome 108.0.5359.125

[QzCurious]

Workaround

So I've messed with it a lot. For anyone who is facing this, a position: relative seems to solve the problem magically.

[QzCurious]

@mattgperry Sorry if I shouldn't pin you. If there is a better way to inform the maintainer, please tell me.

I've update the code. Because passing ref down with context might need additional useEffect for children to set logic with the ref properly (Forgot which part that framer motion warn me to set a property something like withLayoutEffect).

And I also find that the bug happened if the container is not align on top of window.

[mattgperry]

It looks like position: relative works because it makes the container as the next offsetParent which the layout measurements use to decide where the two elements are in relation to each other. It's odd that it isn't the the scrollable container. Setting it to something automatically would be too opinionated so I'm going to add a warning when position: static

[vhorzinek]

@mattgperry should this warning only occur when passing a container prop to useScroll? Because in my case with only the targetRef I get the following warning, eventhough the containers of the targetRef have position set to relative:

Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.

[mtr1990]

Same issues

https://codesandbox.io/p/sandbox/framer-motion-track-element-position-forked-gjq72d?file=%2Fsrc%2FApp.tsx

[RKristofBC]

I found the same issue when using only the targetRef. Do we know if this fix is on the way? It would be cool to get rid of this warning somehow.

[mtr1990]

Try this. I haven't detected any problems so far.

html {
  position: relative; // Add
}

[rudrikdeveloper]

Try this. I haven't detected any problems so far.

html {
  position: relative; // Add
}

Thanks bro, I added this in my styles.css and it worked like a charm. No other issue came.

[erbilozum]

Try this. I haven't detected any problems so far.

html {
  position: relative; // Add
}

Thanks. I didn't get any errors after adding CSS.

[tzachyrm]

When passing containerRef to a child component using it as useScroll's container, the ref might not be hydrated by the time the child component renders. In this case, useScroll will issue the confusing warning about the container position.

const Parent = () => {
    const ref = useRef();

    return (
        <div ref={ref}>
            <Child containerRef={ref} />
            <Child containerRef={ref} />
        </div>
    );
}

const Child = ({containerRef}) => {
    useScroll({container: containerRef}); // this will probably warn and not work
    ...
})

A possible solution is first to render the parent element and only when it's ready to render its children:

const Parent = () => {
    const ref = useRef();
    const [containerRendered, setContainerRendered] = useState(false);

    useEffect(() => {
        setContainerRendered(true);
    }, []);

    return (
        <div ref={ref}>
            {containerRendered && <>
                <Child containerRef={ref} />
                <Child containerRef={ref} />
            </>}
        </div>
    );
}

[jeffijoe]

Even if not passing in a container, the warning is logged. I updated framer-motion to 11.0.0 in the useScroll element tracking sample and the warning was logged.

[10daer]

Try this. I haven't detected any problems so far.

html {
  position: relative; // Add
}

Works like charm