React-styleguidist: Isolate components with `position: fixed`

[okonet]

Currently, elements with position: fixed will be positioned relative to the body element which holds the styleguide. But ideally those elements should remain inside example's wrapper elements.

Example:

You can see an example of faulty positioned element live at https://react.feedly.com

This post summarizes on how easy it is to fix it: https://medium.com/@didoo/keep-it-simple-stupid-b5fe06b1b025

Apparently, all we need to do is to add a CSS transform to the wrapper element:

.styleguide-frame {
  position: relative;
  transform: translate3d(0, 0, 0); /* <-- THIS LINE MAKES THE TRICK! */
  outline: 1px solid #eaeaea;
}

Source: https://gist.github.com/didoo/873bf9eb23669f8ac4d468c580d5cdfd#file-styleguide-frame-css

[okonet]

Thanks @didoo for the post and getting to the bottom of it!

[sapegin]

I don't think we should do it for all examples by default, but we can implement it as a modifier.

[okonet]

Why not doing it for all? The only implication I can see is possible jank with lots if elements. Not sure it’s critical for this kind of project.

How would you pass the modifier to the wrapper? AFAIK there is no way to it now.

[sapegin]

I don't like having translate3d for all examples, especially for a feature that is useful for 0,1% of examples.

That's another question, if it's not done yet, it's not difficult to do.

[sapegin]

One side effect I already see: it switches text antialiasing to grayscale.

[janhoogeveen]

Better option imho; seperate the layout container (position fixed) from the component itself. The component itself ideally doesn't know anything or assume anything about its place on the screen.

[sapegin]

I'm going to close this for now: there are workarounds and the proposed solutions has flaws. But feel free to send a pull request with a better solution.

[Subterrane]

It took me a bit to figure out how to get the workaround enabled. This seems to work:

styleguide.config.js

```module.exports = {
components: "src/components/*/[A-Z].js",
styles: {
StyleGuide: {
"@global body": {
fontFamily: "Helvetica"
}
},
Playground: {
preview: {
position: "relative",
transform: "translate3d(0, 0, 0)",
outline: "1px solid #661
}
}
}
};