resize-observer: Use getBoundingClientRect instead of contentRect

.changeset/eleven-roses-smash.md

@@ -0,0 +1,5 @@
+---
+"@solid-primitives/resize-observer": patch
+---
+
+Use `getBoundingClientRect` to get element size on resize

packages/resize-observer/README.md

@@ -144,6 +144,8 @@ If you want a reactive interface for media-queries, please checkout [the media p
 
 Creates a reactive store-like object of current width and height dimensions of html element.
 
+It uses `ResizeObserver` under the hood—to observe when the element size changes—and `getBoundingClientRect` to get the current size.
+
 ### How to use it
 
 `createElementSize` needs to be provided a target. It can be an HTML element, or a reactive signal returning one. Target also takes falsy values to disable tracking.

packages/resize-observer/dev/index.tsx

@@ -39,7 +39,7 @@ const App: Component = () => {
       <div class="center-child min-h-82">
         <div
           ref={e => (ref = e)}
-          class="shadow-bg-gray-900 center-child h-24 w-24 rounded-md bg-orange-500 shadow-lg"
+          class="shadow-bg-gray-900 center-child h-24 w-24 rounded-md border-8 border-white bg-orange-500 shadow-lg"
           style={{
             width: `${width()}px`,
             height: `${height()}px`,

packages/resize-observer/src/index.ts

@@ -175,10 +175,7 @@ export function createElementSize(
     sharedConfig.context || isFn ? ELEMENT_SIZE_FALLBACK : getElementSize(target),
   );
 
-  const ro = new ResizeObserver(([e]) => {
-    const { width, height } = e!.contentRect;
-    setSize({ width, height });
-  });
+  const ro = new ResizeObserver(([e]) => setSize(getElementSize(e!.target)));
   onCleanup(() => ro.disconnect());
 
   if (isFn) {