Addon:Docs Zoom in/zoom out impacts docs view

[CodeByAlex]

Describe the bug
Zooming in and out impacts the look and feel of the docs view

Expected behavior
Zooming in and out in the canvas should only impact the canvas

Additional context
version: 5.3.0-alpha.17
Example found in: Official Storybook - https://monorepo-git-next.storybook.now.sh

[stale]

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!

[liamross]

WORKAROUND: I have a workaround that I implemented to prevent this, it's a script inside of .storybook/manager-head.html.

<script>
  const STORYBOOK_IFRAME_SELECTOR = '#storybook-preview-iframe';
  const DOCS_ROOT_SELECTOR = '#docs-root';

  function withIframe(iframe) {
    const iframeWindow = iframe.contentWindow;

    const zoomObserver = new MutationObserver(() => {
      const iframeBody = iframeWindow.document.body;
      const zoom = Number(iframeBody.style.zoom || 1);
      const adjustedZoom = 1 / zoom;
      const docsRoot = iframeBody.querySelector(DOCS_ROOT_SELECTOR);
      if (docsRoot) docsRoot.style.zoom = adjustedZoom;
    });

    iframeWindow.addEventListener('DOMContentLoaded', () => {
      zoomObserver.observe(iframeWindow.document.body, {
        attributes: true,
        childList: true,
        subtree: true,
        attributeFilter: ['style'],
      });
    });
  }

  const nodeAddedObserver = new MutationObserver(mutations => {
    const iframe = document.querySelector(STORYBOOK_IFRAME_SELECTOR);
    if (!iframe || !withIframe) return;
    nodeAddedObserver.disconnect();
    withIframe(iframe);
    withIframe = null;
  });

  window.addEventListener('DOMContentLoaded', () => {
    nodeAddedObserver.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: false,
      characterData: false,
    });
  });
</script>

Basically it just divides 1 by the current zoom of the body (the style.zoom property of body is what is changing when you zoom in and out) in order to "counter out" the zoom. It works pretty well for me.

[f1yn]

This is what I've been using:

UPDATE: I've since updated the solution to reduce an occasional flicker, for a more optimized version use this:

function fixZoomEffectForDocs(StoryFn) {
	// Get page params from top level frame (host window)
	const path = (window.top.location.href.split('?')[1] || '')
		.replace('path=', '')

	useLayoutEffect(() => {
		if (path.startsWith('/docs') && document.body.style.zoom !== 1) {
			// Reset zoom to allow normal view
			document.body.style.zoom = 1;
		}
	}, [path]);

	return <StoryFn />;
}

useLayoutEffect is a lot more effective at making the change in styles clean looking, and the extra !== 1 guard keeps redundant changes at bay.

[liamross]

^ That's definitely a lot simpler than mine, I'll give that a try

[vanessayuenn]

Hi! I am going through and cleaning up old issues in the repo. We just shipped a ton of improvements in Storybook 7.0, and I suspect this bug might be fixed already. Can you please try it out? If this issue persists with the latest version, please open a new bug report with a 7.x reproduction. Thank you so much! 🙏🏼