Does @solid-primitives/resize-observer not return the client bounds?

72 Views Asked by At

I am struggling to get @solid-primitives/resize-observer to work.

Although props.containerRef.getBoundingClientRect() is reporting the correct bounds, when I use createResizeObserver, both left and top appear to be 0.

Is it an offset from the parent? Here is a fragment of my code:

const Flowers: Component = (props: {containerRef: HTMLDivElement}) => {
  const [bounds, setBounds] = createSignal(null);
  const [particles, setParticles] = createSignal<Particle[]>([]);

  onMount(() => {
    const elementBounds = props.containerRef && props.containerRef.getBoundingClientRect();
    if (elementBounds) {
      setBounds(elementBounds); // <--- CORRECT
      console.log('elementBounds on mount', elementBounds);
    }
  });

  onMount(() => {
    createResizeObserver(props.containerRef, (b, element, entry,) => {
      if (element === props.containerRef) {
        console.log('DOMRect on mount', b); // <--- INCORRECT appears to be window bounds
        setBounds(b);
      }
    });
  });

  //...return something or other
}

If it is not expected to return the client bounding box, then fine: I will calculate that separately.

0

There are 0 best solutions below