Storybook: Addon Centered causes component to disappear when zooming

[CodeByAlex]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Open a component that uses addon centered
2. use the + or - magnifying glass in storybook
3. component will disappear

Expected behavior
Component shouldnt disappear.

Screenshots

System:

• Browser: [chrome]
• Framework: [react, angular, and more?] example above is from the official storybook
• Version: [at least as of addon centered: 5.1.1 will have to check on 5.0 versions]

[ndom91]

Can confirm I have the same issue.

[CodeByAlex]

@ndom91 is this something that you would like to take a look into? I don't think it would be a terribly difficult task and we are always looking for people to contribute 😄

[ndom91]

@CodeByAlex yeah ill take a look at it this evening when I have some free time :)

I was hoping someone else had maybe already found a solution haha

[ndom91]

So unfortunately I dont have a solution yet, but I did find some things - maybe it will ring a bell for someone else..

The element disappears immediately once any css transform is applied, be it scale, transformX, translateY, translateZ, etc.

In this case the zoom button adds a translate: scale(1.25), for example. If you take this property off in the dev tools the element reappears. I did some googling and none of the common suggestions fixed the issue.

There is kind of a work-around which I discovered which we could implement, and that is using zoom(1.25) instead.

According to MDN zoom is a 'non-standard' property though, but has pretty good browser compatibility:

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

https://caniuse.com/#feat=css-zoom

[8beeeaaat]

@shilman

I found the solution.
The body element should styled

lib/core/src/server/templates/base-preview-head.html

html, body{
  width: 100%;
  height: 100%;
}

[ndom91]

Looks good on my end too! Have you made a pull request?

[8beeeaaat]

@ndom91
Sorry, I couldn't make PR...
I can't push commit with permission error.
I'm not Storybook's member.

[ndom91]

If you clone it first, make your change in your cloned version, and then you should be able to make a PR from there.

[8beeeaaat]

Wow!! I'll try it!!

[ndom91]

Yes, this is the standard way to do it if you dont have the rights to the repo.

See, for example, this pull request: https://github.com/storybookjs/storybook/pull/7397

It is from @ctavan's clone, back into storybookjs:next branch

[8beeeaaat]

@ndom91
I made PR #7400 !
Thank you very much for guiding me! !

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.6 containing PR #7400 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[8beeeaaat]

@shilman
Thanks!!🙌

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.10 containing PR #7400 that references this issue. Upgrade today to try it out!

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.21 containing PR #7640 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[shilman]

@CodeByAlex @ndom91 @8beeeaaat @quentind @Hypnosphi @ndelangen @tmeasday

I'm reverting #7640 and #7400. We should not be modifying the preview styles since it can conflict with the user's style and break visual tests (among other things).

We'll have to come up with a different solution to this problem. @Hypnosphi suggested body {transformOrigin: center center;} as an option. Whatever we do it's important that it's only applied to centered stories.

[CodeByAlex]

@shilman thats a really good point. I will say that addon centered applies styles to the component to place it in the center to begin with as seen here: https://github.com/storybookjs/storybook/blob/next/addons/centered/src/styles.ts

If we want to make sure that styles aren’t interfering(which makes sense), we may want to consider how the addon works from the ground up.

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.29 containing PR #7749 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.21 containing PR #8442 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.