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

[vanessayuenn]

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]

Hi, I would like to look into this.

[yannbf]

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]

Thanks, looking into it.

…

On Fri, Feb 9, 2024 at 10:42 AM Yann Braga ***@***.***> wrote: Assigned #25818 <#25818> to @ghidersamihaela <https://github.com/ghidersamihaela>. — Reply to this email directly, view it on GitHub <#25818 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHMTKVJCOVYMFY6DBG5YGTDYSXOO5AVCNFSM6AAAAABCRK27DWVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJRG42TKMRUHAZTANY> . You are receiving this because you were assigned.Message ID: ***@***.***>

-- *---- Ghidersa Mihaela-Roxana*

[Tomsxmart]

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]

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

[RuxueJ]

@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]

@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]

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!