From 61483a7938e41daabb5e133017dd84351be8f055 Mon Sep 17 00:00:00 2001 From: Alex Wilson Date: Wed, 16 Oct 2019 08:37:00 -0400 Subject: [PATCH] Fix zoom compat issues with addon centered for browsers other than firefox --- lib/ui/src/components/preview/iframe.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/lib/ui/src/components/preview/iframe.js b/lib/ui/src/components/preview/iframe.js index 2f934f04c625..ed744d96d960 100644 --- a/lib/ui/src/components/preview/iframe.js +++ b/lib/ui/src/components/preview/iframe.js @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; import { styled } from '@storybook/theming'; +const FIREFOX_BROWSER = 'Firefox'; + const StyledIframe = styled.iframe({ position: 'absolute', display: 'block', @@ -25,14 +27,19 @@ export class IFrame extends Component { shouldComponentUpdate(nextProps) { const { scale } = this.props; - if (scale !== nextProps.scale) { - this.setIframeBodyStyle({ - width: `${nextProps.scale * 100}%`, - height: `${nextProps.scale * 100}%`, - transform: `scale(${1 / nextProps.scale})`, - transformOrigin: 'top left', - }); + if (window.navigator.userAgent.indexOf(FIREFOX_BROWSER) !== -1) { + this.setIframeBodyStyle({ + width: `${nextProps.scale * 100}%`, + height: `${nextProps.scale * 100}%`, + transform: `scale(${1 / nextProps.scale})`, + transformOrigin: 'top left', + }); + } else { + this.setIframeBodyStyle({ + zoom: 1 / nextProps.scale, + }); + } } // this component renders an iframe, which gets updates via post-messages