Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Question]: Can we remove the screen jump when modals are shown? #14442

Closed
1 task done
wkeese opened this issue Aug 15, 2023 · 3 comments
Closed
1 task done

[Question]: Can we remove the screen jump when modals are shown? #14442

wkeese opened this issue Aug 15, 2023 · 3 comments
Labels
status: needs triage 🕵️‍♀️ status: waiting for author's response 💬 type: question ❓

Comments

@wkeese
Copy link
Contributor

wkeese commented Aug 15, 2023

Question for Carbon

When displaying a modal, the scroll bar on <body> is hidden by the following CSS:

.bx--body--with-modal-open {
 overflow: hidden;
}

Since this affects the width of the browser window (at least on Windows), it causes either:

  • Paragraph content to reflow.
  • Columns in tables etc. to shift to the left.

Modal.js and ComposedModal.js both toggle this CSS class. Or at least, they both have code to toggle the class; there seems to be a bug in Modal.js where that code doesn't run correctly.

You can see it clearly from the "Launch modal" button on https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview, especially if you add content to the <body> that will reflow on browser width change.

This CSS was obviously added intentionally... it traces back to 15d5fc8 and is still there today (https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L436).

However, it's unclear why it was added and whether or not it's still needed.

Given the negative side effects of hiding the scrollbar, do we need that CSS?

Code of Conduct
@tay1orjones
Copy link
Member

@wkeese This was added in #3237 to fix the defect of content behind the modal being scrollable.

Is there a reliable way to get the scrollbar width on a given browser and/or OS? If so we could apply a margin-right of that value to avoid the reflow. You could do this in your application with custom styles for now. It may be complicated to support platforms that allow hiding the scrollbars, such as MacOS.

@wkeese
Copy link
Contributor Author

wkeese commented Aug 19, 2023 •
edited
Loading

I think this is one of those problems that can't be solved just by CSS. You can do this in Javascript:

const scrollBarWidth = element.offsetWidth - element.clientWidth;

Note also that the scrollbar might be on the left side instead of the right side. Ideally, you would use a selector the :dir(rtl) selector but that's not widely supported yet so the best you could do is

body[dir="rtl"]

PS: Oh if you are writing Javascript anyway then you can do getComputedStyle(document.body).direction.

@sstrubberg sstrubberg moved this to 🕵️‍♀️ Triage in Design System Sep 18, 2023
@tay1orjones
Copy link
Member

Right, but I don't know if there's a way to detect if the user agent is including the scrollbar as part of the clientWidth or not. IIRC on mac it only does if the setting for "always show scrollbars" is selected in the system settings.

If there's not a reliable way to detect this, we may not be able to add a solution that works for all platforms.

@sstrubberg sstrubberg closed this as not planned Won't fix, can't repro, duplicate, stale Nov 10, 2023
@github-project-automation github-project-automation bot moved this from 🕵️‍♀️ Triage to ✅ Done in Design System Nov 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: needs triage 🕵️‍♀️ status: waiting for author's response 💬 type: question ❓
Projects
Design System
Archived in project
Milestone
No milestone
Development

No branches or pull requests
3 participants
@wkeese @tay1orjones @sstrubberg