diff --git a/internal/gui/assets/app.css b/internal/gui/assets/app.css
index 7efb11c7..1012a533 100644
--- a/internal/gui/assets/app.css
+++ b/internal/gui/assets/app.css
@@ -1841,7 +1841,7 @@ body.window .ag-sk-icon { width: 22px; height: 22px; border-radius: 6px; }
 .provider .name .badge { margin-left: 6px; }
 /* a row whose name holds a vendor's outage badge (#971): the name gives
    way to it, the badge is never the part cut */
-.provider .name:has(> .badge.upstream) { display: flex; align-items: center; }
+.provider .name.with-upstream { display: flex; align-items: center; }
 .provider .name > .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .badge { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); vertical-align: 1px; }
 .provider.selected { background: var(--card-2); }
diff --git a/internal/gui/assets/app.js b/internal/gui/assets/app.js
index 0f150609..74905035 100644
--- a/internal/gui/assets/app.js
+++ b/internal/gui/assets/app.js
@@ -4506,6 +4506,7 @@ function markUpstream() {
   const put = (box, s, after) => {
     if (!box) return;
     box.querySelector(":scope > .badge.upstream")?.remove();
+    box.classList.remove("with-upstream");
     if (!s) return;
     // a row's name as a box of its own, to be the part cut short
     if (!after && box.firstChild?.nodeType === Node.TEXT_NODE) {
@@ -4515,6 +4516,8 @@ function markUpstream() {
     }
     const b = upstreamBadge(s);
     if (after) after.after(b); else box.append(b);
+    // a class, not :has(), which Safari 15.0 doesn't parse (#220)
+    box.classList.add("with-upstream");
   };
   for (const row of document.querySelectorAll("#providers .row.provider[data-id], #offProviders .row.provider[data-id]")) {
     put(row.querySelector(".name"), upstreamOf(row.dataset.id));