storybookjs/storybook

Firefox zoom implementation breaks position: fixed elements in Docs

Open

#16,774 opened on Nov 24, 2021

View on GitHub
 (31 comments) (5 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
addon: docsblock: otherbugcompatibility with other toolsgood first issuehelp wanted

Description

Describe the bug In Firefox, the zoom feature uses transform styles (see https://github.com/storybookjs/storybook/pull/12845) - unfortunately this breaks positioning on elements that require position: fixed when in the "Docs" view.

Normally a position: fixed element's position would correspond to the viewport but in Firefox it corresponds to the element with the transform style.

The issue is present regardless of actually using the zoom feature. I have tried to disable the zoom feature (related feature request: https://github.com/storybookjs/storybook/issues/16771) in the hopes that it might also remove the styling used for zoom, however, the styling remains.

To Reproduce I created a simplified reproduction of the issue here: https://github.com/idesigncode/bug-storybook-firefox-position-fixed

To view the issue, open the story in Docs view in both Firefox and another browser.

System System: OS: macOS 12.0.1 CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Binaries: Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node Yarn: 3.1.0 - /usr/local/bin/yarn npm: 7.20.0 - ~/.nvm/versions/node/v14.17.3/bin/npm Browsers: Chrome: 96.0.4664.55 Edge: 95.0.1020.53 Firefox: 94.0.1 Safari: 15.1 npmPackages: @storybook/addon-actions: ^6.4.0-rc.7 => 6.4.0-rc.7 @storybook/addon-docs: ^6.4.0-rc.7 => 6.4.0-rc.7 @storybook/addon-essentials: ^6.4.0-rc.7 => 6.4.0-rc.7 @storybook/addon-links: ^6.4.0-rc.7 => 6.4.0-rc.7 @storybook/react: ^6.4.0-rc.7 => 6.4.0-rc.7

Additional context My actual use case is documenting a tooltip component that uses fixed positioning to stay within the window.

Here's some screenshots of the simplified example:

Chrome ✅ Chrome

Firefox ❌ Firefox

Firefox (with the transform style disabled) ✅ Firefox (with the transform style disabled)

Contributor guide

Tech stack
typescriptreactcsshtml
Domain
frontenddocumentation
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.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS position: fixed behaviorCSS transform propertyUnderstanding of Firefox rendering
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the zoom implementation in pull request #12845, which uses CSS transform for zoom. The issue is that applying a transform to a parent element changes the containing block for position: fixed children in Firefox. Consider alternative zoom methods that do not interfere with fixed positioning, or apply the transform selectively to avoid affecting the Docs view. Key files to examine include the zoom feature code in the Storybook core and the Docs addon where fixed positioning is used for tooltips or popups.