The Wayback Machine - https://web.archive.org/web/20211218060815/https://github.com/storybookjs/storybook/issues/16774
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Firefox zoom implementation breaks position: fixed elements in Docs #16774

Open
idesigncode opened this issue Nov 24, 2021 · 7 comments
Open

Firefox zoom implementation breaks position: fixed elements in Docs #16774

idesigncode opened this issue Nov 24, 2021 · 7 comments
Labels
addon: docs block: other bug compatibility with other tools good first issue help wanted

Comments

@idesigncode
Copy link

@idesigncode idesigncode commented Nov 24, 2021 •
edited

Describe the bug
In Firefox, the zoom feature uses transform styles (see #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: #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)
@idesigncode idesigncode changed the title Firefox zoom implementation breaks position: fixed component elements in Docs Firefox zoom implementation breaks position: fixed elements in Docs Nov 24, 2021
@Tomastomaslol
Copy link
Member

@Tomastomaslol Tomastomaslol commented Nov 24, 2021

@idesigncode Thanks for a great bug report! I have done some work on the zoom feature in the past and I might be able to help.

Going through your examples I can't really see an obvious solution to the problem but I'm going to fire up my development environment over the weekend and see what I can figure out.

@idesigncode Are you interested in figuring out a solution for this issue too?
@idesigncode
Copy link
Author

@idesigncode idesigncode commented Nov 25, 2021 •
edited

Hey @Tomastomaslol, all good, yeah the solution isn't obvious to me either...

For my specific use case I would be happy to disable the zoom feature on the affected stories as long as that also removed the transform style.

Happy to help test and be involved in the discussion but I'm not familiar with the source code.
@23thinker
Copy link

@23thinker 23thinker commented Nov 27, 2021

Is the story rendered graphically in code?
@Tomastomaslol
Copy link
Member

@Tomastomaslol Tomastomaslol commented Dec 7, 2021

I had a look at this and the behaviour is inconsistent across the 2 browsers.

@idesigncode, Could you please explain your use case? To me, the behaviour in firefox looks more correct than in chrome. I would expect the element you are previewing to be positioned relative to the "story wrapper".

Screen Shot 2021-12-07 at 11 04 59 am

In the attached screenshot I added a green box around what I consider to be the "story wrapper." 🙂
@idesigncode
Copy link
Author

@idesigncode idesigncode commented Dec 7, 2021

@Tomastomaslol, sure thing:

My use case is documenting a tooltip component that is always visible within the window (if opened). This is achieved by using position: fixed and calculating the appropriate top/left values in relation to the viewport.

The calculated values are based off getBoundingClientRect which essentially is expecting the first document ancestor to be what I would call the "positioning origin".

In Firefox, the first ancestor with the transform style kind of becomes the "positioning origin" and so the calculated vertical and horizontal positioning values are no longer correct.

It may be worth noting that all other browsers I've tested this in behave like Chrome so Firefox does appear to be the odd-one-out in regards to this issue.
@Monk102
Copy link

@Monk102 Monk102 commented Dec 14, 2021

How can I contribute to this project? I have moderate knowledge of HTML CSS and Javascript!
@shilman
Copy link
Member

@shilman shilman commented Dec 16, 2021

@Monk102 https://storybook.js.org/docs/react/contribute/how-to-contribute
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: docs block: other bug compatibility with other tools good first issue help wanted
5 participants
@shilman @Tomastomaslol @idesigncode @Monk102 @23thinker