[BUG] hiding scrollbar makes content shift when using FAB and Actionsheet a.o.

kirbydesign / designsystem

Kirby Design System

https://cookbook.kirby.design

MIT License

84 stars 22 forks source link

[BUG] hiding scrollbar makes content shift when using FAB and Actionsheet a.o. #1543

Open alxzak opened 3 years ago

alxzak commented 3 years ago

Describe the bug Content width changes when hiding scrollbar, which makes content shift and flicker.

To Reproduce Steps to reproduce the behavior:

Go to https://cookbook.kirby.design/home/showcase/action-sheet
Click on Show actionsheet
See error

Expected behavior When using desktop, the scrollbar should just be disabled.

Additional context Add any other context about the problem here.

Tasks:

[ ] Have the bug report verified by contacting a member of @kirbydesign/kirby-guild
[ ] Move issue from "Ready to do" -> "in progress" on our project board
[ ] Create Fix Branch
[ ] Create test reproducing the error
[ ] Fix
[ ] If relevant Update Examples and Showcase
[ ] Push commits to GitHub
[ ] Open a pull request (remember to add closes #issueno to the description) and ask @kirbydesign/kirby-guild for review
[ ] Merge to master and delete branch

jkaltoft commented 3 years ago

Tech refinement

This is OS dependent. On MacOS with standard setting for scroll bars in system preferences (Auto) this is not an issue. When "Show scroll bars" is set to "Always" there is similar "content jumping" on MacOS.

I suppose it's always an issue on Windows and Linux.

One solution is to set overflow-y: scroll; on the html element in general. This will always show a vertical scrollbar, but when the page content takes up less vertical space than the viewport the page won't be scrollable.

I advice against attempting to solve this by trying to calculate the scrollbar width programatically.

MadsBuchmann commented 2 years ago

I have the same issue in the popover PR where the no-scroll class is used to lock the background when opening the dropdown. This causes all of the content to shift see comment Another related issue: #1197

RasmusKjeldgaard commented 2 years ago

This is also an issue with the Pull-to-refresh functionality introduced in #1831. When the pull-to-refresh overlay appears in the top of the page, the scrollbar is removed if it is present.

jkaltoft commented 1 year ago

Tech refinement

This is OS dependent. On MacOS with standard setting for scroll bars in system preferences (Auto) this is not an issue. When "Show scroll bars" is set to "Always" there is similar "content jumping" on MacOS.

I suppose it's always an issue on Windows and Linux.

One solution is to set overflow-y: scroll; on the html element in general. This will always show a vertical scrollbar, but when the page content takes up less vertical space than the viewport the page won't be scrollable.

I advice against attempting to solve this by trying to calculate the scrollbar width programatically.

Found a blog post that (among other good stuff about scrollbars) has a description of a simple, modern approach to preventing layout shift.