1 files changed, 21 insertions, 20 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c49b7e6de..867a5a304 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -730,7 +730,8 @@ export class MainView extends ObservableReactComponent<object> {
                     style={{
                         width: `calc(100% - ${this._leftMenuFlyoutWidth + this.leftMenuWidth() + this.propertiesWidth()}px)`,
                         minWidth: `calc(100% - ${this._leftMenuFlyoutWidth + this.leftMenuWidth() + this.propertiesWidth()}px)`,
-                        transform: DocumentView.LightboxDoc() ? 'scale(0.0001)' : undefined,
+                        opacity: DocumentView.LightboxDoc() ? 0 : undefined,
+                        pointerEvents: DocumentView.LightboxDoc() ? 'none' : undefined,
                     }}>
                     {!this.mainContainer ? null : this.mainDocView}
                 </div>
@@ -920,19 +921,19 @@ export class MainView extends ObservableReactComponent<object> {
         );
     }
 
+    setMainDashRef = (r: HTMLDivElement | null) =>
+        r &&
+        new ResizeObserver(
+            action(() => {
+                this._dashUIWidth = r.getBoundingClientRect().width;
+                this._dashUIHeight = r.getBoundingClientRect().height;
+            })
+        ).observe(r);
     @computed get mainDashboardArea() {
         return !this.userDoc ? null : (
             <div
                 className="mainView-dashboardArea"
-                ref={r => {
-                    r &&
-                        new ResizeObserver(
-                            action(() => {
-                                this._dashUIWidth = r.getBoundingClientRect().width;
-                                this._dashUIHeight = r.getBoundingClientRect().height;
-                            })
-                        ).observe(r);
-                }}
+                ref={this.setMainDashRef}
                 style={{
                     color: 'black',
                     height: `calc(100% - ${this.topOfDashUI + this.topMenuHeight()}px)`,
@@ -1038,7 +1039,7 @@ export class MainView extends ObservableReactComponent<object> {
 
     @computed get inkResources() {
         return (
-            <svg width={0} height={0}>
+            <svg width={0} height={0} style={{ display: 'block' }}>
                 <defs>
                     <filter id="inkSelectionHalo">
                         <feColorMatrix
@@ -1071,6 +1072,14 @@ export class MainView extends ObservableReactComponent<object> {
     };
 
     lightboxMaxBorder = [200, 50];
+    setMainViewRef = (r: HTMLDivElement | null) =>
+        r &&
+        new ResizeObserver(
+            action(() => {
+                this._windowWidth = r.getBoundingClientRect().width;
+                this._windowHeight = r.getBoundingClientRect().height;
+            })
+        ).observe(r);
     render() {
         return (
             <div
@@ -1084,15 +1093,7 @@ export class MainView extends ObservableReactComponent<object> {
                         ele.scrollTop = ele.scrollLeft = 0;
                     })(document.getElementById('root')!)
                 }
-                ref={r => {
-                    r &&
-                        new ResizeObserver(
-                            action(() => {
-                                this._windowWidth = r.getBoundingClientRect().width;
-                                this._windowHeight = r.getBoundingClientRect().height;
-                            })
-                        ).observe(r);
-                }}>
+                ref={this.setMainViewRef}>
                 {this.inkResources}
                 <DictationOverlay />
                 <SharingManager />