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.08k stars 9.25k forks source link

[Bug]: In Chrome, scrolling in Preview iframe stops working after resizing iframe by dragging divider #29221

Open MichaelAllenWarner opened 1 day ago

MichaelAllenWarner commented 1 day ago

Describe the bug

In Chrome, I lose the ability to scroll inside the Preview iframe after dragging the divider between the Preview iframe and the Sidebar on the left.

Below is a video "demonstrating" the problem. At the end, I attempt and fail to scroll vertically inside the Preview iframe, though in the video you can't tell that that's what I'm trying to do.

https://github.com/user-attachments/assets/218c7d6a-ccd9-4ec3-aa3d-c7f662227467

Reproduction link

https://stackblitz.com/github/storybookjs/sandboxes/tree/next/nextjs/default-ts/after-storybook

Reproduction steps

  1. Open Chrome. I'm using Chrome version 128.0.6613.120 (Official Build) (arm64), and my operating system is macOS 13.5.2.
  2. Go to https://stackblitz.com/github/storybookjs/sandboxes/tree/next/nextjs/default-ts/after-storybook
  3. In Storybook, navigate to a "Page" story (just so that the content in the Preview iframe is long enough for vertical scrolling).
  4. Click inside the Preview iframe; successfully scroll vertically.
  5. Resize the Preview iframe by dragging the divider between the Preview iframe and the Sidebar on the left.
  6. Attempt to scroll vertically inside the Preview iframe.

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/addon-interactions: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/addon-onboarding: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/blocks: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/nextjs: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/react: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/test: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    storybook: ^8.4.0-alpha.1 => 8.4.0-alpha.1

Additional context

This seems very similar to some old issues that were resolved: