Why does shouldScaleBackground add a black background to the body?

[sunwrobert]

The issue is particularly egregious in Storybook. It adds the following style to the body:

    right: 0px;
    position: fixed !important;
    top: 0px;
    left: 0px;
    height: auto;
    background: black;
    pointer-events: none;

This leads to some really weird styling/janky black flashing. It in fact looks perfect if I disable this black background and then zoom out. Is there a way we could remove setting background color entirely?

Great library btw!

[emilkowalski]

Can you show me how it looks in your storybook? A video would be fine.

[sunwrobert]

@emilkowalski https://www.loom.com/share/f027a3332767456ca59b9d53faa26974

[joaom00]

@emilkowalski https://www.loom.com/share/f027a3332767456ca59b9d53faa26974

The link isn't working anymore

[cervantes-x]

https://github.com/emilkowalski/vaul/assets/117078849/37bba81f-43e7-48fa-8b3c-fec15a84c201

Here is a video showing the issue. When the drawer is opened it adds a black background to the body, when the drawer is closed the black background persists which should not happen.

[emilkowalski]

You can now disable the background with setBackgroundColorScale={false} on the root element.