fix(loading): Fix presentation performance issues in Big Sur Safari (#…

…1382) Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · May 14, 2021 · b6dd0da · b6dd0da
1 parent 1bc9f6f
commit b6dd0da
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -256,29 +256,32 @@ $thumbnail-sidebar-width: 191px; // Extra pixel to account for sidebar border
         border: 0;
         border-image: none;
 
-        // Add shadow to an underlying element to avoid overlapping shadows on canvasWrapper and loadingIcon
-        &::before {
-            @include bp-DocShadow;
+        // Avoid showing loading states on invisible pages due to performance issues in Safari
+        &:not(.bp-is-invisible) {
+            // Add shadow to an underlying element to avoid overlapping shadows on canvasWrapper and loadingIcon
+            &::before {
+                @include bp-DocShadow;
+
+                position: absolute;
+                top: $pdfjs-page-padding;
+                right: 0;
+                bottom: $pdfjs-page-padding;
+                left: 0;
+                display: block;
+                content: '';
+            }
 
-            position: absolute;
-            top: $pdfjs-page-padding;
-            right: 0;
-            bottom: $pdfjs-page-padding;
-            left: 0;
-            display: block;
-            content: '';
+            // Display the ghost state only if the page does not already have rendered content (e.g. during a resize)
+            .loadingIcon:first-child {
+                @include bp-DocGhost;
+            }
         }
 
         // Override loading icon styles from pdf.js
         .loadingIcon {
             top: $pdfjs-page-padding;
             bottom: $pdfjs-page-padding;
             background: none;
-
-            // Display the ghost state only if the page does not already have rendered content (e.g. during a resize)
-            &:first-child {
-                @include bp-DocGhost;
-            }
         }
 
         // Fixes annotation icon broken src