UI: Remove css zoom

code/ui/components/src/Zoom/ZoomElement.tsx

@@ -2,23 +2,13 @@ import type { ReactElement } from 'react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { styled } from '@storybook/theming';
-import { browserSupportsCssZoom } from './browserSupportsCssZoom';
-
-const hasBrowserSupportForCssZoom = browserSupportsCssZoom();
 
 const ZoomElementWrapper = styled.div<{ scale: number; elementHeight: number }>(
-  ({ scale = 1, elementHeight }) =>
-    hasBrowserSupportForCssZoom
-      ? {
-          '> *': {
-            zoom: 1 / scale,
-          },
-        }
-      : {
-          height: elementHeight || 'auto',
-          transformOrigin: 'top left',
-          transform: `scale(${1 / scale})`,
-        }
+  ({ scale = 1, elementHeight }) => ({
+    height: elementHeight || 'auto',
+    transformOrigin: 'top left',
+    transform: `scale(${1 / scale})`,
+  })
 );
 
 type ZoomProps = {
@@ -52,10 +42,7 @@ export function ZoomElement({ scale, children }: ZoomProps) {
 
   return (
     <ZoomElementWrapper scale={scale} elementHeight={elementHeight}>
-      <div
-        ref={hasBrowserSupportForCssZoom ? null : componentWrapperRef}
-        className="innerZoomElementWrapper"
-      >
+      <div ref={componentWrapperRef} className="innerZoomElementWrapper">
         {children}
       </div>
     </ZoomElementWrapper>

code/ui/components/src/Zoom/ZoomIFrame.tsx

@@ -1,6 +1,5 @@
 import type { RefObject, ReactElement } from 'react';
 import { Component } from 'react';
-import { browserSupportsCssZoom } from './browserSupportsCssZoom';
 
 export type IZoomIFrameProps = {
   scale: number;
@@ -36,19 +35,12 @@ export class ZoomIFrame extends Component<IZoomIFrameProps> {
 
   setIframeInnerZoom(scale: number) {
     try {
-      if (browserSupportsCssZoom()) {
-        Object.assign(this.iframe.contentDocument.body.style, {
-          zoom: 1 / scale,
-          minHeight: `calc(100vh / ${1 / scale})`,
-        });
-      } else {
-        Object.assign(this.iframe.contentDocument.body.style, {
-          width: `${scale * 100}%`,
-          height: `${scale * 100}%`,
-          transform: `scale(${1 / scale})`,
-          transformOrigin: 'top left',
-        });
-      }
+      Object.assign(this.iframe.contentDocument.body.style, {
+        width: `${scale * 100}%`,
+        height: `${scale * 100}%`,
+        transform: `scale(${1 / scale})`,
+        transformOrigin: 'top left',
+      });
     } catch (e) {
       this.setIframeZoom(scale);
     }