Unable to set scrollbar offset to other elements

[robertpiosik]

Hi, it's currently impossible to set scrollbar offsets on other fixed elements, padding right is somewhat cleared anytime react-sheet-slide sets its styles on body.

[woofers]

@robertpiosik Not sure I fully understand the use-case but react-sheet-slide will add padding to the body for 2 reasons:

• Remove any applied inline styles on body in-order to animate the backdrop
• To account for the missing scrollbar width, the modal adds the equivalent width to the body as paddingRight to minimize layout shift. This is disabled on mobile which is why paddingRight may be set to 0.

This can be overridden by using using a CSS selector with more specificity like:

body:not([attr]):not([attr="value"]) { 
  padding: 35px !important
}

By adding the 2 attribute selectors, this style will apply consistent padding regardless of the modal state. Alternatively the padding could just be moved in a div that is a direct child of the body which is what I would recommend. Hope this helps.

[robertpiosik]

To clarify, I can't accommodate for layout shift on any child of body. While I can set padding-left or any other property without a problem, padding-right gets cleared.

[monolithed]

@woofers I don’t have any inline styles on the body, but I’m encountering an issue on all the latest iPhone models, regardless of the browser. When a component collapses, the page suddenly scrolls up and then returns to its original position. However, this issue doesn’t occur in Safari on macOS.

I’ve tried isolating the demo code on a standalone page, and everything works fine there. But when I integrate the example code into my own page, the backdrop doesn’t appear in the open state (even when I wrap the entire page in a Portal and add the rss-backdrop class). The scrolling issue I described above also starts happening.

I suspect it might be related to Next.js restoring scroll positions, but I can’t confirm this.

https://github.com/user-attachments/assets/4743ce87-80bc-4b35-91b9-b898e84fd489