Skip to content

[docs] Avoid viewport units on animated modal demo parts - #6124

Merged
atomiks merged 1 commit into
mui:masterfrom
atomiks:docs-modal-demo-viewport-units
Nov 10, 2026
Merged

atomiks merged 1 commit into
mui:masterfrom
atomiks:docs-modal-demo-viewport-units

Conversation

@atomiks

@atomiks atomiks commented Oct 28, 2026

Copy link
Copy Markdown
Contributor

Related to #6119

In Safari 27 with classic scrollbars, a WebKit regression drops running CSS transitions on elements that use viewport units when the scroll lock is released, so the Dialog, AlertDialog and Drawer demos skipped their exit animations. This PR replaces the viewport units on the animated popups and backdrops with %, and moves the original dvh/vh values into the existing iOS-only @supports (-webkit-touch-callout: none) blocks so iOS is unchanged. The outside scroll dialog demo keeps 100dvh because its slide distance is viewport-based by design.

@atomiks atomiks added docs Improvements or additions to the documentation. component: dialog Changes related to the dialog component. component: alert dialog Changes related to the alert dialog component. component: drawer Changes related to the drawer component. labels Oct 28, 2026
@pkg-pr-new

pkg-pr-new Bot commented Oct 28, 2026 •

Copy link
Copy Markdown

commit: 40ad5f6

@code-infra-dashboard

code-infra-dashboard Bot commented Oct 28, 2026 •

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

No regressions in 36 benchmarks · ran 3m 50s · details


Check out the code infra dashboard for more information about this PR.

@netlify

netlify Bot commented Oct 28, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 40ad5f6
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6af2a3a947e6a6cfb958ded6
😎 Deploy Preview https://deploy-preview-6124--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@atomiks
atomiks marked this pull request as ready for review October 28, 2026 10:44
@atomiks
atomiks force-pushed the docs-modal-demo-viewport-units branch from ba2cac9 to 40ad5f6 Compare November 10, 2026 04:55
@atomiks
atomiks enabled auto-merge (squash) November 10, 2026 04:56
@atomiks
atomiks merged commit a465557 into mui:master Nov 10, 2026
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: alert dialog Changes related to the alert dialog component. component: dialog Changes related to the dialog component. component: drawer Changes related to the drawer component. docs Improvements or additions to the documentation.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant