search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.21k stars 9.26k forks source link

[Bug]: preview area has weird border with blurred vision filter #25818

Open vanessayuenn opened 8 months ago

vanessayuenn commented 8 months ago

Describe the bug

Project: MealDrop Version: 8.0.0-alpha.14 Bug/feedback:

When activating the blurred vision filter from the accessibility addon, the preview area shows weird borders:

Storybook 7

Storybook 8

This is caused because of this newly added box-shadow in the preview iframe: https://github.com/storybookjs/storybook/blob/next/code/ui/manager/src/components/preview/Iframe.tsx#L16

To Reproduce

  1. Go to https://stackblitz.com/edit/github-csg7tu
  2. Open any story
  3. Use the blurred vision filter from addon-a11y

System

No response

Additional context

No response

ghidersamihaela commented 8 months ago

Hi, I would like to look into this.

yannbf commented 8 months ago

Hey @ghidersamihaela thanks for your help! Follow our contribution docs for some guidance and feel free to reach out on discord for further assistance. Thank you!

ghidersamihaela commented 7 months ago

Thanks, looking into it.

On Fri, Feb 9, 2024 at 10:42 AM Yann Braga @.***> wrote:

Assigned #25818 https://github.com/storybookjs/storybook/issues/25818 to @ghidersamihaela https://github.com/ghidersamihaela.

— Reply to this email directly, view it on GitHub https://github.com/storybookjs/storybook/issues/25818#event-11755248307, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHMTKVJCOVYMFY6DBG5YGTDYSXOO5AVCNFSM6AAAAABCRK27DWVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJRG42TKMRUHAZTANY . You are receiving this because you were assigned.Message ID: @.***>

--

---- Ghidersa Mihaela-Roxana

Tomsxmart commented 6 months ago

Hi. It is caused by div with id "storybook-preview-wrapper" not having an appropriate background color.

Giving the element background of white gets rid of the issue - but this should be implemented keeping in mind that the issue will still persist if user clicks dark mode on. So we should use a variable that determines dark mode or light mode (if there is one?)

I'm personally unable to make the PR since i cannot recreate the project locally (i assume since i'm running on windows, i tried WSL as well - did not work)

RuxueJ commented 3 months ago

Hi, Saad, Allison and I (a group in CTI codeday program) will work on this problem!

RuxueJ commented 2 months ago

@yannbf Our Codeday group discussed the issue of the "weird border." We discovered that it is caused by the interaction of two CSS styles: the filter blur(2px) /home/ruxue/shared_storybook/code/addons/a11y/src/components/VisionSimulator.tsx and the iframe CSS setting boxShadow: '0 0 100px 100vw rgba(0,0,0,0.5)' /home/ruxue/shared_storybook/code/core/src/manager/components/preview/Iframe.tsx . When both styles are applied to the iframe, the weird border appears.
We have come up with two potential solutions. The first is to delete the boxShadow CSS since it does not seem to take effect. However, we believe this would only temporarily remove the problem. If there are more adjustments to this CSS in the future, the same issue might reoccur.

The second solution is to apply the filter to the storybook-root element within the iframe, rather than to the iframe itself. Is this method acceptable for you?

ghengeveld commented 2 months ago

@RuxueJ if y'all can figure out a way to apply the blur only to the contents of the iframe rather than the iframe itself, that would be the best solution.

RuxueJ commented 2 months ago

We use useEffect hook to apply the filters to the content in the iframe instead of the iframe itself and fix the bug. We send a pull request. Please review. Thank you!