storybookjs/storybook

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

Open

#29221 opened on Sep 26, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bughelp wantedui

Description

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:

Contributor guide

Tech stack
typescriptreactstorybook
Domain
frontendtesting
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of iframesFamiliarity with event handling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The bug occurs after resizing the preview iframe by dragging the divider. The issue likely stems from the resizer component losing or not properly transferring scroll event listeners to the iframe after resize. Investigate the resizer component in the Storybook codebase, possibly in the addon essentials or core layout. Check the links to old issues (#1779, #2482, #17202) for previous fixes that might have regressed. The reproduction is clear via Stackblitz; use browser devtools to inspect event listeners on the iframe before and after resize.