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,');
- --average-icon-url: url('data:image/svg+xml;utf8,');
- --fail-icon-url: url('data:image/svg+xml;utf8,');
+ --pass-icon-url: url('data:image/svg+xml;utf8,');
+ --average-icon-url: url('data:image/svg+xml;utf8,');
+ --fail-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,');
+ --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 @@