Skip to content

Conversation

@atomiks
Copy link
Contributor

@atomiks atomiks commented Sep 18, 2025

The getOffset(...) value when calculating margin offset on the scrollbar is reported differently in Safari compared to Chrome/Firefox. Switching to logical properties (as we also switched to use use logical functional CSS a while back) fixes the issue

https://deploy-preview-2776--base-ui.netlify.app/experiments/scroll-area/scroll-area-inset

@atomiks atomiks added type: bug It doesn't behave as expected. browser: Safari Affects or fixes behavior in Apple Safari. component: scroll area Changes related to the scroll area component. labels Sep 18, 2025
@atomiks atomiks force-pushed the fix/scroll-area-rtl-safari-2 branch from da0741a to ab50551 Compare September 18, 2025 09:26
@netlify
Copy link

netlify bot commented Sep 18, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit da0741a
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/68cbcfe4ac41ae0008ed73c9
😎 Deploy Preview https://deploy-preview-2776--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 18, 2025
@netlify
Copy link

netlify bot commented Sep 18, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 69bbb5d
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/68cbe9f77f4b4900089b9f7f
😎 Deploy Preview https://deploy-preview-2776--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@mui-bot
Copy link

mui-bot commented Sep 18, 2025

Bundle size report

Bundle Parsed size Gzip size
@base-ui-components/react 🔺+42B(+0.01%) 🔺+13B(+0.01%)

Details of bundle changes

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 18, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 18, 2025

Open in StackBlitz

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@2776
pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@2776

commit: 69bbb5d

@atomiks atomiks force-pushed the fix/scroll-area-rtl-safari-2 branch from 8c9f4c2 to ab50551 Compare September 18, 2025 09:41
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 18, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 18, 2025
@atomiks atomiks force-pushed the fix/scroll-area-rtl-safari-2 branch from 141d15e to dbc4de1 Compare September 18, 2025 09:56
@atomiks atomiks marked this pull request as ready for review September 18, 2025 10:03
Copy link
Member

@LukasTy LukasTy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure it fixes the horizontal scrollbar? 🤔
The below screenshots are from the deployed docs.

Safari

Screenshot 2025-09-18 at 13 53 53

Chrome

Screenshot 2025-09-18 at 13 54 12

@atomiks
Copy link
Contributor Author

atomiks commented Sep 18, 2025

@LukasTy welp, the tests were failing with just marginInline so I changed it to marginInlineStart + marginInlineEnd and it has the exact same issue it seems 😅

I think for RTL we have to assume the margin is symmetric and avoid end

Copy link
Member

@LukasTy LukasTy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for fixing it. 👍
If we get reported problems with this approach, it can be adjusted. 👌

@atomiks atomiks merged commit 3f9aa37 into mui:master Sep 18, 2025
19 of 20 checks passed
@atomiks atomiks deleted the fix/scroll-area-rtl-safari-2 branch September 18, 2025 12:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

browser: Safari Affects or fixes behavior in Apple Safari. component: scroll area Changes related to the scroll area component. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants