storybook 6: zoom buttons in docs do not work

[DanielRuf]

Describe the bug
Clicking the zoom in / out buttons in the docs tab does nothing.

To Reproduce
Steps to reproduce the behavior:

1. Create a new default sotrybook setup with npx sb init
2. Start storybook and go to http://localhost:6006/?path=/docs/example-button--primary
3. Click on the zoom in / out buttons.

Expected behavior
The rendered component should be visible.

Screenshots

Code snippets

System:

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4710MQ CPU @ 2.50GHz
  Binaries:
    Node: 10.16.0 - ~/.nodenv/versions/10.16.0/bin/node
    Yarn: 1.22.5 - ~/.yvm/shim/yarn
    npm: 6.13.4 - ~/.nodenv/versions/10.16.0/bin/npm
  Browsers:
    Chrome: 81.0.4044.113
    Firefox: 79.0
  npmPackages:
    @storybook/addon-a11y: ^6.0.20 => 6.0.20 
    @storybook/addon-actions: ^6.0.19 => 6.0.20 
    @storybook/addon-console: ^1.2.1 => 1.2.1 
    @storybook/addon-essentials: ^6.0.19 => 6.0.20 
    @storybook/addon-links: ^6.0.20 => 6.0.20 
    @storybook/addon-storysource: ^6.0.20 => 6.0.20 
    @storybook/node-logger: ^6.0.19 => 6.0.20 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.19 => 6.0.20 

Additional context

[shilman]

Works in chrome, appears to be broken in FF

[ndelangen]

Here's the relevant code:
https://github.com/storybookjs/storybook/blob/3b58f16c33f9145a78beec18318d7dd85d521f72/lib/components/src/blocks/Preview.tsx#L63-L66

[Tomastomaslol]

It doesn't look like there is any support for zoom in firefox.

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

I think it should be enough to replace it with a transform: scale(). I will give go locally and see if it works! 🙂

[ndelangen]

It will, but it will mean the scrollbar will scale as well. This is why zoom was used.

[DanielRuf]

It will, but it will mean the scrollbar will scale as well. This is why zoom was used.

The scrollbar of an iframe? Should not be the case when you apply scale only on the rendered component(s). Or maybe I missed something.

[Tomastomaslol]

The scrollbar of an iframe? Should not be the case when you apply scale only on the rendered component(s). Or maybe I missed something.

Out of interest, I had a quick play around with this and the behaviour of zoom and transform: scale() is quite different.

Using zoom:

{ zoom = 1 }) => ({
    '> *': {
      zoom: 1 / zoom,
    },

Using transform scale:

  ({ zoom = 1 }) => ({
    '> *': {
      transform: `scale(${1 / zoom})`,
    },
  }),

It's possible that the functionality could be rewritten using transform scale but the effort would greater than a simple one-liner.

[DanielRuf]

Out of interest, I had a quick play around with this and the behaviour of zoom and transform: scale() is quite different.

That is probably because of how it is positioned and some transform-origin issue maybe.

[ndelangen]

looks like a transform-origin: top left should fix that issue @DanielRuf

[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!

[Tomastomaslol]

Hi @ndelangen!

I took another look at this issue and tried to replicate the behaviour of the CSS zoom using transform and scale. I think I managed to create something that is fairly close to the original behaviour:

https://github.com/storybookjs/storybook/pull/12845

If you have some spare time please let me know if you think the solution would work and if you would like me to spend some more time testing/tweaking it to try to get a fix merged.

[ndelangen]

@Tomastomaslol of course I do! https://calendly.com/ndelangen/storybook just pick a date & time 👍

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-rc.6 containing PR #12845 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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