From e3cc5170df004ce45f88d4f3d66988bd0d0b1f3a Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Thu, 21 Nov 2024 07:26:30 +0100 Subject: [PATCH] Tweak styles to work around browser bugs (#1124) Avoid using visibility: collapse since it's not properly supported in WebKit[1] and there's a hit testing bug in Gecko[2]. Browsers currently use display:none for tr[hidden] (spec violation[3]). Switch to fixed table layout and set widths to get stable column withs when searching. [1] https://bugs.webkit.org/show_bug.cgi?id=8735 [2] Fixes #1118 [3] https://html.spec.whatwg.org/multipage/rendering.html#tables-2 --- index.html | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 02eb03e..356e290 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,6 @@ Mozilla Standards Positions - @@ -77,38 +76,41 @@ html { font-family: system-ui, sans-serif; color: var(--root-color); background-color: var(--root-bg-color); line-height: 1.5; scrollbar-gutter: stable; scroll-padding-top: calc(2.5em + 1px); } html.loading header ~ * { visibility: hidden; } body { margin: 2em; } - header { background-color: var(--header-bg-color); margin: 0 auto 2em; padding: 3em; max-width: 60em; } + header { background-color: var(--header-bg-color); margin: 0 auto 2em; padding: 3em; max-width: 66em; } h1 { font-size: min(12vw, 4em); margin: 0; color: var(--h1-color); line-height: 1; } h1 img { max-height: 0.83333333em; width: auto; } mark { background-color: var(--highlight-bg-color); color: var(--highlight-color); padding: 0.5em; margin: -0.5em; line-height: 2; box-decoration-break: clone; } :any-link { color: var(--link-color); padding: 0.25rem 0; } - table { margin: 0 auto 2em; padding: 3em; max-width: 60em; } table :any-link { text-decoration: none; } table :any-link:hover { text-decoration: underline; } - search { margin: 0 auto 2em; padding: 3em; max-width: 60em; } + search { margin: 0 auto 2em; padding: 3em; max-width: 66em; } search label { display: flex; gap: 1em; } input[name="search"] { width: 100%; margin-right: 5em; border: 1px solid gray; border-radius: 3px; background-color: var(--input-bg-color); color: var(--input-color); } td.more-info :any-link { text-decoration: none; } - table { border-collapse: collapse; width: 100%; } + table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 0 auto 2em; max-width: 72em; } thead { position: sticky; top: 0; background-color: var(--root-bg-color); z-index: 2; } - tr[hidden] { display: table-row; visibility: collapse; } th { text-align: left; box-shadow: var(--table-border-color) 0 1px 0; } th:first-child { text-align: right; } th, td.venues, td.more-info { white-space: nowrap; } - th.specification { width: 100vw; } + th.link { width: 6em; } + th.specification { width: 32.5em; } td.venues, td.more-info { word-spacing: 8px; padding-top: 0.1em; padding-bottom: 0.1em; font-size: 1.5em; } td.venues :any-link, td.more-info :any-link { padding: 0; } td.link :any-link { padding: 0.25rem; } - th.concerns { width: 5em; } - th, td { padding: 0.5em; } - td:first-child { padding-left: 6em; width: 0.5em; } + th.concerns { width: 7em; } + th.position { width: 4em; } + th.topics { width: 3.5em; } + th.venues { width: 3.5em; } + th.more-info { width: 8.5em; } + th, td { padding: 0.5rem; } + td:first-child { padding-left: 5.5em; width: 1em; } tr.details > td { padding-top: 0; padding-bottom: 0; border-top: none; } - summary { position: relative; white-space: nowrap; top: calc(-2em - 1px); left: -5em; width: min-content; cursor: default; user-select: none; } + summary { position: relative; white-space: nowrap; top: calc(-2em - 1px); left: -4.5em; width: min-content; cursor: default; user-select: none; } details > dl { margin-top: -1em; } details:not([open]) { height: 0; } - details dl { margin-left: -5.5em; grid-template-columns: 6em auto; } + details dl { margin-left: -5em; grid-template-columns: 6em auto; } details dt { font-weight: bold; } dl { display: grid; grid-template-columns: max-content auto; row-gap: 1em; max-width: calc(100vw - 4em) } dt { text-align: right; }