report: fix flicker in normal case report (#9955)

GoogleChrome · Nov 20, 2019 · e402c91 · e402c91
1 parent c53d3d7
commit e402c91
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
@@ -170,7 +170,7 @@
       --plugin-icon-size: 75%;
       --gauge-wrapper-width: 60px;
       --gauge-percentage-font-size: 13px;
-      position: sticky;
+      position: fixed;
       left: 0;
       right: 0;
       top: var(--topbar-height);
@@ -185,6 +185,11 @@
       pointer-events: none;
     }
 
+    .lh-devtools .lh-sticky-header {
+      /* The report within DevTools is placed in a container with overflow, which changes the placement of this header unless we change `position` to `sticky.` */
+      position: sticky;
+    }
+
     .lh-sticky-header--visible {
       display: grid;
       grid-auto-flow: column;