storybookjs/storybook

Firefox zoom implementation breaks position: fixed elements in Docs

Fechada

#16.774 aberto em 24 de nov. de 2021

Ver no GitHubGuia do colaborador
 (31 comentários) (5 reações) (0 responsável)TypeScript (10.058 forks)batch import
addon: docsblock: otherbugcompatibility with other toolsgood first issuehelp wantedtriage:reviewed

Métricas do repositório

Stars
 (89.909 estrelas)
Métricas de merge de PR
 (Mesclagem média 7d 22h) (184 fundiu PRs em 30d)

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)

Guia do colaborador

Direção de pesquisa
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.
Pilha de tecnologia
typescriptreactcsshtml
Domain
frontenddocumentation
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
CSS position: fixed behaviorCSS transform propertyUnderstanding of Firefox rendering
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
30