storybook: Firefox zoom implementation breaks position: fixed elements in Docs

This is an issue for us in Chrome as well. Components using position: fixed render incorrectly inside Canvas doc blocks because of the wrapper div having a transform property in it. This CSS is new on 7.1.

.css-1rj4uy6 {
    height: 68px;
    transform-origin: top left;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

Implemented a (hopefully) temporary fix in our global stylesheet for Storybook:

.docs-story div[scale] {
  transform: none !important;
}

I do not expect there is an ideal fix here as the inconsistency lies in the browsers’ implementation of the transform style…

But if I may propose an alternative: only apply the transform style if the zoom feature is not disabled.

I believe the zoom feature is the only reason to use the transform style in the first place, so applying it while this feature is disabled seems unnecessary.

That’s problematic because the majority of popover components in most web apps are implemented with position: fixed, either with portalling or with the native dialog element appearing in the top layer. Perhaps this could get better with the arrival of the new Popover API (absolute everything in the top layer?), but alas we’re not there yet.

However, the scale transform does make sense for the zoom feature, so I don’t expect a rollback. Perhaps there is now a need to disable zoom (and remove the transform) for individual stories that will certainly break? The only other option we have is to implement the CSS hack outlined by @wfigueroa-chwy above, to ensure our users don’t assume our components are broken.

👋 I’ve just encountered this issue and cannot seem to find any workaround! It happens in Chrome as well. It’s fine in story mode because the story uses the whole document as a canvas, but has broken in Docs. Strangely, this was working until the recent upgrade of 7.1

@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?

I’m totally agree with @valentinpalkovic, the correct behavior of the docs container is to simulate a separate viewport. Consider this scenario: a Modal stories with a lot of fixed/absolute modals in the docs, all modals will be rendered on top of each other.

If you have a story with fixed element you have to consider the height and the position of that fixed element to be correct displayed in the docs.

Thanks @idesigncode just got around to cloning everything and looking at issue repos so Ill check back if I see anything!

@Stroudnat Yes, I’m not aware of any recent changes to resolve this.

Hey @idesigncode could you please suggest me , how do I start contributing to this project .I am new to the world of open source contribution. Please help me

https://storybook.js.org/docs/react/contribute/how-to-contribute

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.