report: position sticky-header highlighter with css grid (#9186)

GoogleChrome · Jun 11, 2019 · 7bcd1b4 · 7bcd1b4
1 parent 233f197
commit 7bcd1b4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -314,9 +314,8 @@ class ReportUIFeatures {
     this.scoreScaleEl = this._dom.find('.lh-scorescale', this._document);
     this.stickyHeaderEl = this._dom.find('.lh-sticky-header', this._document);
 
-    // Position highlighter at first gauge; will be transformed on scroll.
-    const firstGauge = this._dom.find('.lh-gauge__wrapper', this.stickyHeaderEl);
-    this.highlightEl = this._dom.createChildOf(firstGauge, 'div', 'lh-highlighter');
+    // Highlighter will be absolutely positioned at first gauge, then transformed on scroll.
+    this.highlightEl = this._dom.createChildOf(this.stickyHeaderEl, 'div', 'lh-highlighter');
   }
 
   /**

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
@@ -186,7 +186,8 @@
     }
 
     .lh-sticky-header--visible {
-      display: flex;
+      display: grid;
+      grid-auto-flow: column;
       pointer-events: auto;
     }
 
@@ -204,8 +205,10 @@
       width: var(--score-container-width);
       height: 1px;
       background: var(--color-highlighter-bg);
+      /* Position at bottom of first gauge in sticky header. */
       position: absolute;
-      bottom: -5px;
+      grid-column: 1;
+      bottom: -1px;
     }
 
     .lh-gauge__wrapper:first-of-type {