Puck issue 1456 overlay position by shannonhochkins · Pull Request #1461 · puckeditor/puck

shannonhochkins · 2025-12-11T10:59:56Z

Description

Fix overlay positioning to fully cover components even when parents/targets apply CSS transforms or fixed positioning. We now rely on the browser’s transformed bounding boxes, add fixed-target handling, and resync overlays when style/class or geometry changes. Removed the legacy inverse-scale correction because getBoundingClientRect already reports transformed sizes/positions, so dividing by accumulated transforms caused misalignment under parent transforms.

Changes made

Use the element’s transformed getBoundingClientRect plus scroll offsets to set overlay left/top/width/height; drop accumulateTransform inverse-scaling
- getBoundingClientRect() already returns the post-transform box: position, width, and height are in the final rendered coordinate space, including all parent transforms (scale/translate/rotate). Dividing by an accumulated scale double-corrects and shrinks/shifts the overlay when parents are transformed.
Detect fixed ancestors and set overlay position: fixed while skipping scroll offsets in that case.
Add a MutationObserver watching style and class to resync overlays when styles change.
Add a lightweight rAF rect watcher to resync when geometry moves due to transforms (e.g., carousel track translate/scale) without waiting for scroll/resize.
Keep ResizeObserver and ref reattachment logic; sync now depends only on getStyle.
Supports css transforms completely (scale, rotation, translation, even skew) (example screenshot below, try the same css in production ;) )

How to test

Update inline css of any component, change to position fixed, overlay should be positioned correctly
Update inline css of any component, or even a parent, add css transform scale3d(0.79, 0.79, 1) translate3d(20%, 0, 0); and you should see the overlay move to match the new position when hovering, even other sub components if added to a parent with transforms like scale3d(0.79, 0.79, 1) translate3d(20%, 0, 0); overlay should match the rendered element bounds.
Set a draggable ancestor to position: fixed; overlay should also be fixed and align while scrolling.
Apply style/class changes (e.g., add/remove CSS that shifts size/position) and confirm the overlay updates immediately.
transitions that manipulate inline styles even not on the target will now respect the new position and overlays will update (carousel example)
Test disableIframe=true to ensure all the above still works when no iframe is provided

I have done EXTENSIVE testing on this and it's pretty solid! Can't find any more issues

Multiple tests were done, comparing production to this branch, screen recordings below:

output.mp4

^ Fixes a bug in production in the puck demo that's present

And here's the difference in my software:

EDIT - This screen recording was taken before i added the raf helper, you can see the overlay sometimes jumps when the carousel moves, until you move your cursor or scroll/resize - this is fixed now, additionally the "fixed" popup overlay that animates, is also patched and now is pinned to the element directly (this was a separate side effect i removed with a way over-engineered solution) - now much simpler and very little changes to puck

output_small.mp4

vercel · 2025-12-11T11:00:01Z

@shannonhochkins is attempting to deploy a commit to the Puck Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2026-01-09T11:02:57Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
puck-demo	Ready	Preview, Comment	Jan 9, 2026 11:08am
puck-docs	Ready	Preview	Jan 9, 2026 11:08am

chrisvxd

Sorry for slow review. Can confirm it works, but have performance concerns with the animation loop. See comment.

chrisvxd · 2026-01-09T11:06:38Z

packages/core/components/DraggableComponent/index.tsx

+          ["style", "class"].includes(mutation.attributeName || "")
+        )
+      ) {
+        sync();


We should probably put this inside a requestAnimationFrame

chrisvxd · 2026-01-09T11:08:06Z

packages/core/components/DraggableComponent/index.tsx

+      left: `${rect.left + scroll.x}px`,
+      top: `${rect.top + scroll.y}px`,


Hm bit confused why the transforms have been removed here, and how they're getting applied

I did explain this in the main description of the PR a little more in detail, but a bounding box value is provided with transforms applied, including its parent(s), so theres no need to apply the transforms here

chrisvxd · 2026-01-09T11:10:02Z

packages/core/components/DraggableComponent/index.tsx

+    const tick = () => {
+      const el = ref.current;
+
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        const prev = lastRectRef.current;
+
+        const changed =
+          !prev ||
+          Math.abs(rect.x - prev.x) > 0.5 ||
+          Math.abs(rect.y - prev.y) > 0.5 ||
+          Math.abs(rect.width - prev.width) > 0.5 ||
+          Math.abs(rect.height - prev.height) > 0.5;
+
+        if (changed) {
+          lastRectRef.current = rect;
+          sync();
+        }
+      }
+
+      frame = requestAnimationFrame(tick);
+    };


I'm not sure this animation loop is viable. The demo app now idles my MBP (M1 Max) CPU utilisation at 10%, up from under 2%. Can you find another solution?

We can throttle it, the main benefit of the RAF is animations realistically, but theres something many other operations thst weren't not listening to that can affect position so i added the raf, would a throttled raf suffice?

shannonhochkins · 2026-01-16T02:37:49Z

@chrisvxd I've made a few changes, are you able to check them again for me?

Perf change: removed the always-on overlay sync loop and switched to event-driven + throttled measurement.

Previously, each DraggableComponent started a requestAnimationFrame loop that ran continuously, even when the app was otherwise idle. That meant we were calling getBoundingClientRect() every frame and occasionally updating overlay state, which kept the renderer active and raised baseline CPU usage.

In this update:

Overlay sync is now coalesced via scheduleSync() (single rAF per frame). This prevents multiple rapid triggers from causing multiple React updates.
Resize handling stays event-driven via ResizeObserver, which calls scheduleSync() when the element’s dimensions change.
Scroll / window resize are handled via listeners (scroll uses capture to catch nested scroll containers), triggering scheduleSync() only when those events occur.
To still support position changes caused by animations/layout shifts/transforms (i.e. movement that doesn’t emit a scroll/resize/resizeObserver event), we added a throttled rect sampling loop while the component is active (measuring at ~10fps via MEASURE_EVERY_MS). When a rect delta is detected, we trigger scheduleSync().

Net effect: we keep overlay positioning correct during real movement (scroll/resize/animations), but avoid the previous “always hot” 60fps loop that increased idle CPU.

The throttled measurement loop is not started on hover, only when selected/dragging, to avoid many components spinning up trackers as the mouse moves through the editor.

chrisvxd · 2026-01-23T12:11:54Z

I haven't yet reviewed the latest changes, but wanted to know if you'd considered using https://github.com/Shopify/position-observer for this?

shannonhochkins · 2026-01-23T20:00:08Z

I haven't yet reviewed the latest changes, but wanted to know if you'd considered using https://github.com/Shopify/position-observer for this?

Haven't seen that before, happy to wire it in if you'd prefer

shannonhochkins added 6 commits February 25, 2025 15:52

Merge remote-tracking branch 'measuredco/main'

a47c666

Merge remote-tracking branch 'measuredco/main'

9706933

Merge remote-tracking branch 'measuredco/main'

4847308

Merge remote-tracking branch 'measuredco/main'

ab4fabf

Merge remote-tracking branch 'measuredco/main'

94011e9

Updating draggable component to handle smarter positioning of overlay

508ed29

vercel bot deployed to Preview – puck-demo January 9, 2026 11:06 View deployment

vercel bot deployed to Preview – puck-docs January 9, 2026 11:08 View deployment

chrisvxd requested changes Jan 9, 2026

View reviewed changes

shannonhochkins added 3 commits January 16, 2026 13:32

Performance optimisations

82df5ef

Merge remote-tracking branch 'measuredco/main'

c80764b

Merge branch 'main' into puck-issue-1456-overlay-position

2562f54

Running prettier

ae3eaa9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Puck issue 1456 overlay position#1461

Puck issue 1456 overlay position#1461
shannonhochkins wants to merge 10 commits intopuckeditor:mainfrom
shannonhochkins:puck-issue-1456-overlay-position

shannonhochkins commented Dec 11, 2025 •

edited

Loading

Uh oh!

vercel bot commented Dec 11, 2025

Uh oh!

vercel bot commented Jan 9, 2026 •

edited

Loading

Uh oh!

chrisvxd left a comment

Uh oh!

chrisvxd Jan 9, 2026

Uh oh!

chrisvxd Jan 9, 2026

Uh oh!

shannonhochkins Jan 10, 2026

Uh oh!

chrisvxd Jan 9, 2026

Uh oh!

shannonhochkins Jan 10, 2026

Uh oh!

shannonhochkins commented Jan 16, 2026

Uh oh!

chrisvxd commented Jan 23, 2026

Uh oh!

shannonhochkins commented Jan 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		left: `${rect.left + scroll.x}px`,
		top: `${rect.top + scroll.y}px`,

Conversation

shannonhochkins commented Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes made

How to test

Uh oh!

vercel bot commented Dec 11, 2025

Uh oh!

vercel bot commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chrisvxd left a comment

Choose a reason for hiding this comment

Uh oh!

chrisvxd Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

chrisvxd Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

shannonhochkins Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

chrisvxd Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

shannonhochkins Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

shannonhochkins commented Jan 16, 2026

Uh oh!

chrisvxd commented Jan 23, 2026

Uh oh!

shannonhochkins commented Jan 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

shannonhochkins commented Dec 11, 2025 •

edited

Loading

vercel bot commented Jan 9, 2026 •

edited

Loading