Preserve element size during drag with contain-intrinsic-size

[Copilot]

When dragging resizable panes, content-visibility: auto causes off-screen content to collapse, triggering layout shifts and scroll jumping. This maintains the performance optimization while stabilizing layout.

Implementation

paneUtils.ts - Modified drag style management:

• setDraggingStyles(): Captures element dimensions via getBoundingClientRect() and sets contain-intrinsic-size inline style with auto keyword before applying data-dragging attribute
• removeDraggingStyles(): Removes contain-intrinsic-size after drag ends

CSS - No changes needed, content-visibility: auto remains active during drag for performance

Mechanism

// Before setting data-dragging attribute (which triggers content-visibility: auto)
if (pane) {
  const rect = pane.getBoundingClientRect()
  // Use 'auto' to track actual size as width changes during drag
  pane.style.setProperty('contain-intrinsic-size', `auto ${rect.width}px auto ${rect.height}px`)
}
pane?.setAttribute('data-dragging', 'true')

The contain-intrinsic-size property with auto keyword provides a size hint to the browser when content-visibility: auto skips rendering. The auto allows the browser to track the actual rendered size as the pane width changes dynamically during drag operations via --pane-width CSS variable updates.

Changelog

Changed

• setDraggingStyles() now captures and preserves element dimensions during drag operations using auto keyword for dynamic sizing
• removeDraggingStyles() cleans up dimension hints after drag

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Tests verify contain-intrinsic-size is applied with auto <width>px auto <height>px format during both pointer and keyboard drag operations, and removed on drag end. Verify dragging near scrollable container edges shows no layout jumps.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

Original prompt

Overview

This is an alternative approach to PR #7445 that maintains the content-visibility: auto optimization while preventing size changes during drag operations.

Problem

When dragging elements, the content-visibility: auto CSS property causes the browser to skip rendering the content of off-screen elements. This results in the element's size changing during drag operations, which causes scroll jumping and layout instability.

PR #7445 simply removes content-visibility: auto from dragging elements, which loses the performance optimization.

Proposed Solution

Instead of removing content-visibility: auto, we should:

1. At drag start: Capture the element's current dimensions (width and height)
2. Set contain-intrinsic-size: Write the captured dimensions as an inline style (contain-intrinsic-size: <width>px <height>px) on the element before the data-dragging='true' attribute is applied (which triggers content-visibility: auto via CSS)
3. At drag end: Remove the inline contain-intrinsic-size style when dragging ends

This approach:

• Keeps the content-visibility: auto optimization for performance during drag
• Maintains the element's initial size via contain-intrinsic-size, preventing layout shifts and scroll jumping
• Is fully reversible when drag ends

Implementation Details

Files to modify:

1. packages/react/src/PageLayout/paneUtils.ts:

   • In setDraggingStyles(): Before setting data-dragging attribute, capture the current getBoundingClientRect() dimensions of both pane and contentWrapper, then set contain-intrinsic-size as an inline style
   • In removeDraggingStyles(): Remove the contain-intrinsic-size inline style

2. packages/react/src/PageLayout/PageLayout.module.css:

   • Keep the content-visibility: auto rule in the .Pane[data-dragging='true'], .ContentWrapper[data-dragging='true'] selector (do NOT remove it like PR Remove content-visibility from dragging elements #7445 does)

Example implementation for setDraggingStyles:

export function setDraggingStyles({handle, pane, contentWrapper}: DraggingStylesParams) {
  // Handle visual feedback
  handle?.style.setProperty('--draggable-handle--bg-color', 'var(--bgColor-accent-emphasis)')
  handle?.style.setProperty('--draggable-handle--drag-opacity', '1')
  handle?.style.setProperty('--draggable-handle--transition', 'none')

  // Capture current dimensions and set contain-intrinsic-size BEFORE setting data-dragging
  // This ensures the element maintains its size when content-visibility: auto is applied
  if (pane) {
    const rect = pane.getBoundingClientRect()
    pane.style.setProperty('contain-intrinsic-size', `${rect.width}px ${rect.height}px`)
  }
  if (contentWrapper) {
    const rect = contentWrapper.getBoundingClientRect()
    contentWrapper.style.setProperty('contain-intrinsic-size', `${rect.width}px ${rect.height}px`)
  }

  // Set attribute for CSS containment (O(1) direct selector, not descendant)
  pane?.setAttribute(DATA_DRAGGING_ATTR, 'true')
  contentWrapper?.setAttribute(DATA_DRAGGING_ATTR, 'true')
}

Example implementation for removeDraggingStyles:

export function removeDraggingStyles({handle, pane, contentWrapper}: DraggingStylesParams) {
  handle?.style.removeProperty('--draggable-handle--bg-color')
  handle?.style.removeProperty('--draggable-handle--drag-opacity')
  handle?.style.removeProperty('--draggable-handle--transition')

  pane?.removeAttribute(DATA_DRAGGING_ATTR)
  contentWrapper?.removeAttribute(DATA_DRAGGING_ATTR)
  
  // Remove contain-intrinsic-size after removing data-dragging
  pane?.style.removeProperty('contain-intrinsic-size')
  contentWrapper?.style.removeProperty('contain-intrinsic-size')
}

Testing

1. Drag an element that has content-visibility: auto applied
2. Verify that the element maintains its size during the drag (no collapse/expansion)
3. Confirm that no scroll jumping occurs when dragging near the edges of a scrollable container
4. Verify the contain-intrinsic-size inline style is present during drag and removed after

Related

• Closes the issue that PR Remove content-visibility from dragging elements #7445 was addressing
• Alternative to PR Remove content-visibility from dragging elements #7445

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2511f92

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[mattcosta7]

@copilot should we use auto width here instead of a fixed width, since we're changing width or is this ok

[Copilot]

Good catch! Updated to use auto ${width}px auto ${height}px format. This allows the browser to track the actual rendered size rather than using a fixed size captured at drag start, which is important since the pane width changes dynamically during drag via --pane-width CSS variable updates.

Fixed in commit 1d93cdb.