diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index 5e8e2210ebff..62e4afb41b4f 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -164,7 +164,7 @@ class CategoryRenderer { renderAuditGroup(group, opts) { const expandable = opts.expandable; const groupEl = this.dom.createElement(expandable ? 'details' : 'div', 'lh-audit-group'); - const summaryEl = this.dom.createChildOf(groupEl, 'summary'); + const summaryEl = this.dom.createChildOf(groupEl, expandable ? 'summary' : 'div'); const summaryInnerEl = this.dom.createChildOf(summaryEl, 'div', 'lh-audit-group__summary'); const headerEl = this.dom.createChildOf(summaryInnerEl, 'div', 'lh-audit-group__header'); const itemCountEl = this.dom.createChildOf(summaryInnerEl, 'div', 'lh-audit-group__itemcount'); diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 04aaddc94d71..a9d294dd08bc 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -226,7 +226,7 @@ class ReportUIFeatures { this.headerSticky.style.transform = `translateY(${heightDiff * scrollPct * -1}px)`; this.headerBackground.style.transform = `translateY(${scrollPct * this.headerOverlap}px)`; this.lighthouseIcon.style.transform = - `translate3d(calc(var(--report-width) / 2),` + + `translate3d(var(--report-width-half),` + ` calc(-100% - ${scrollPct * this.headerOverlap * -1}px), 0) scale(${1 - scrollPct})`; this.lighthouseIcon.style.opacity = (1 - scrollPct).toString(); diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index ad9fa10d6cee..bcb321ddcf2c 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -54,6 +54,8 @@ --metric-timeline-rule-color: #b3b3b3; --display-value-gray: hsl(216, 5%, 39%); --report-width: calc(60 * var(--body-font-size)); + /* Edge doesn't support calc(var(calc())) */ + --report-width-half: calc(30 * var(--body-font-size)); --report-header-height: 161px; --report-header-color: #202124; --navitem-font-size: var(--body-font-size); @@ -77,19 +79,19 @@ --lh-section-vpadding: 12px; --chevron-size: 12px; - --pass-icon-url: url('data:image/svg+xml;utf8,check'); - --average-icon-url: url('data:image/svg+xml;utf8,info'); - --fail-icon-url: url('data:image/svg+xml;utf8,warn'); + --pass-icon-url: url('data:image/svg+xml;utf8,check'); + --average-icon-url: url('data:image/svg+xml;utf8,info'); + --fail-icon-url: url('data:image/svg+xml;utf8,warn'); - --content-paste-icon-url: url('data:image/svg+xml;utf8,'); - --av-timer-icon-url: url('data:image/svg+xml;utf8,'); - --photo-filter-icon-url: url('data:image/svg+xml;utf8,'); - --visibility-icon-url: url('data:image/svg+xml;utf8,'); - --check-circle-icon-url: url('data:image/svg+xml;utf8,'); + --content-paste-icon-url: url('data:image/svg+xml;utf8,'); + --av-timer-icon-url: url('data:image/svg+xml;utf8,'); + --photo-filter-icon-url: url('data:image/svg+xml;utf8,'); + --visibility-icon-url: url('data:image/svg+xml;utf8,'); + --check-circle-icon-url: url('data:image/svg+xml;utf8,'); --check-icon-url: url('data:image/svg+xml;utf8,'); - --search-icon-url: url('data:image/svg+xml;utf8,'); - --remove-circle-icon-url: url('data:image/svg+xml;utf8,'); + --search-icon-url: url('data:image/svg+xml;utf8,'); + --remove-circle-icon-url: url('data:image/svg+xml;utf8,'); } .lh-vars.lh-devtools { @@ -966,6 +968,8 @@ */ .lh-chevron { --chevron-angle: 42deg; + /* Edge doesn't support transform: rotate(calc(...)), so we define it here */ + --chevron-angle-right: -42deg; width: var(--chevron-size); height: var(--chevron-size); margin-top: calc((var(--body-line-height) - 12px) / 2); @@ -988,7 +992,7 @@ .lh-audit-group[open] > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-left, .lh-audit > .lh-expandable-details .lh-chevron__line-right, .lh-audit > .lh-expandable-details[open] .lh-chevron__line-left { - transform: rotate(calc(var(--chevron-angle) * -1)); + transform: rotate(var(--chevron-angle-right)); } .lh-audit-group[open] > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right, diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index 6cb4d99799cb..d280232b273e 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -37,8 +37,8 @@ @@ -168,7 +168,7 @@ position: absolute; top: var(--report-header-height); right: 50%; - transform: translate3d(calc(var(--report-width) / 2), -100%, 0); + transform: translate3d(var(--report-width-half), -100%, 0); opacity: 1; transform-origin: bottom right; will-change: transform, opacity; @@ -359,7 +359,7 @@ - +