Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
Created August 28, 2018 16:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/13f026c56e54810b2d1bcda6d6d608ad to your computer and use it in GitHub Desktop.
Save nolanlawson/13f026c56e54810b2d1bcda6d6d608ad to your computer and use it in GitHub Desktop.
Repro Edge CSS grid bug
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
.status-details {
align-items: center;
display: grid;
grid-area: details;
grid-gap: 20px;
grid-template-columns: minmax(0px, max-content) min-content min-content min-content;
justify-content: left;
margin: 0 5px 10px;
}
.status-article {
cursor: pointer;
display: grid;
grid-template-areas: "header header header header" "sidebar author-name author-handle relative-date" "sidebar spoiler spoiler spoiler" "sidebar spoiler-btn spoiler-btn spoiler-btn" "sidebar mentions mentions mentions" "sidebar content content content" "media media media media" ". toolbar toolbar toolbar" "compose compose compose compose";
grid-template-columns: min-content minmax(0px, max-content) 1fr min-content;
grid-template-rows: repeat(8, max-content);
max-width: calc(-40px + 100vw);
padding: 10px 20px;
}
.status-article.status-in-timeline {
border-bottom: 1px solid var(--main-border);
width: 560px;
}
.status-article.status-in-own-thread {
grid-template-areas: "sidebar author-name" "sidebar author-handle" "spoiler spoiler" "spoiler-btn spoiler-btn" "mentions mentions" "content content" "media media" "details details" "toolbar toolbar" "compose compose";
grid-template-columns: min-content 1fr;
grid-template-rows: repeat(7, max-content);
}
.the-list {
position: relative;
}
.lazy-timeline {
width: 100%;
}
.timeline-reveal-container,
.timeline-slot-reveal-container {
transition: opacity .2s linear;
}
.timeline-anchor-container,
.timeline-page {
position: relative;
}
main {
position: relative;
width: 602px;
max-width: 100vw;
padding: 0;
box-sizing: border-box;
margin: 30px auto 15px;
background: var(--main-bg);
border: 1px solid var(--main-border);
border-radius: 1px;
min-height: 70vh;
}
.container {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 42px;
left: 0px;
right: 0px;
bottom: 0px;
}
*:focus {
outline: 2px solid var(--focus-outline);
}
.container:focus {
outline: none;
}
body {
--button-primary-bg: #6081e6;
--button-primary-text: #fff;
--button-primary-border: #132c76;
--button-primary-bg-active: #456ce2;
--button-primary-bg-hover: #6988e7;
--button-bg: #e6e6e6;
--button-text: #333;
--button-border: #a7a7a7;
--button-bg-active: #bfbfbf;
--button-bg-hover: #f2f2f2;
--input-border: #dadada;
--anchor-text: #4169e1;
--main-bg: #fff;
--body-bg: #e8edfb;
--body-text-color: #333;
--main-border: #dadada;
--svg-fill: #4169e1;
--form-bg: #f7f7f7;
--form-border: #c1c1c1;
--nav-bg: #4169e1;
--nav-border: #214cce;
--nav-a-border: #4169e1;
--nav-a-selected-border: #fff;
--nav-a-selected-bg: #6d8ce8;
--nav-svg-fill: #fff;
--nav-text-color: #fff;
--nav-a-selected-border-hover: #fff;
--nav-a-selected-bg-hover: #839deb;
--nav-a-bg-hover: #577ae4;
--nav-a-border-hover: #4169e1;
--nav-svg-fill-hover: #fff;
--nav-text-color-hover: #fff;
--action-button-fill-color: #90a8ee;
--action-button-fill-color-hover: #a2b6f0;
--action-button-fill-color-active: #577ae4;
--action-button-fill-color-pressed: #2351dc;
--action-button-fill-color-pressed-hover: #3862e0;
--action-button-fill-color-pressed-active: #1d44b8;
--action-button-deemphasized-fill-color: #666;
--action-button-deemphasized-fill-color-hover: #9e9e9e;
--action-button-deemphasized-fill-color-active: #737373;
--action-button-deemphasized-fill-color-pressed: #545454;
--action-button-deemphasized-fill-color-pressed-hover: #616161;
--action-button-deemphasized-fill-color-pressed-active: #404040;
--settings-list-item-bg: #fff;
--settings-list-item-text: #4169e1;
--settings-list-item-text-hover: #4169e1;
--settings-list-item-border: #dadada;
--settings-list-item-bg-active: #e6e6e6;
--settings-list-item-bg-hover: #fafafa;
--toast-bg: #333;
--toast-border: #fafafa;
--toast-text: #fff;
--mask-bg: #333;
--mask-svg-fill: #fff;
--mask-opaque-bg: rgba(51, 51, 51, 0.8);
--loading-bg: #ededed;
--account-profile-bg-backdrop-filter: rgba(255, 255, 255, 0.7);
--account-profile-bg: rgba(255, 255, 255, 0.9);
--deemphasized-text-color: #666;
--focus-outline: #c5d1f6;
--very-deemphasized-link-color: rgba(65, 105, 225, 0.6);
--very-deemphasized-text-color: rgba(102, 102, 102, 0.6);
--status-direct-background: #d2dcf8;
--main-theme-color: #4169e1;
--warning-color: #e01f19;
--alt-input-bg: rgba(255, 255, 255, 0.7);
--muted-modal-bg: transparent;
--muted-modal-focus: #999;
--muted-modal-hover: rgba(255, 255, 255, 0.2);
--compose-autosuggest-item-hover: #ced8f7;
--compose-autosuggest-item-active: #b8c7f4;
--compose-autosuggest-outline: #dbe3f9;
--compose-button-halo: rgba(255, 255, 255, 0.1);
}
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 14px;
line-height: 1.4;
color: var(--body-text-color);
background: var(--body-bg);
-webkit-tap-highlight-color: transparent;
}
body.theme-majesty {
--button-primary-bg: #9b4ae6;
--button-primary-text: #fff;
--button-primary-border: #3c0e66;
--button-primary-bg-active: #8c2fe3;
--button-primary-bg-hover: #a053e8;
--button-bg: #e6e6e6;
--button-text: #333;
--button-border: #a7a7a7;
--button-bg-active: #bfbfbf;
--button-bg-hover: #f2f2f2;
--input-border: #dadada;
--anchor-text: #8a2be2;
--main-bg: #fff;
--body-bg: #eddefb;
--body-text-color: #333;
--main-border: #dadada;
--svg-fill: #8a2be2;
--form-bg: #f7f7f7;
--form-border: #c1c1c1;
--nav-bg: #8a2be2;
--nav-border: #701ac0;
--nav-a-border: #8a2be2;
--nav-a-selected-border: #fff;
--nav-a-selected-bg: #a358e8;
--nav-svg-fill: #fff;
--nav-text-color: #fff;
--nav-a-selected-border-hover: #fff;
--nav-a-selected-bg-hover: #af6eeb;
--nav-a-bg-hover: #9641e5;
--nav-a-border-hover: #8a2be2;
--nav-svg-fill-hover: #fff;
--nav-text-color-hover: #fff;
--action-button-fill-color: #b77ced;
--action-button-fill-color-hover: #c08ef0;
--action-button-fill-color-active: #9641e5;
--action-button-fill-color-pressed: #781ccd;
--action-button-fill-color-pressed-hover: #8522e1;
--action-button-fill-color-pressed-active: #6317a9;
--action-button-deemphasized-fill-color: #666;
--action-button-deemphasized-fill-color-hover: #9e9e9e;
--action-button-deemphasized-fill-color-active: #737373;
--action-button-deemphasized-fill-color-pressed: #545454;
--action-button-deemphasized-fill-color-pressed-hover: #616161;
--action-button-deemphasized-fill-color-pressed-active: #404040;
--settings-list-item-bg: #fff;
--settings-list-item-text: #8a2be2;
--settings-list-item-text-hover: #8a2be2;
--settings-list-item-border: #dadada;
--settings-list-item-bg-active: #e6e6e6;
--settings-list-item-bg-hover: #fafafa;
--toast-bg: #333;
--toast-border: #fafafa;
--toast-text: #fff;
--mask-bg: #333;
--mask-svg-fill: #fff;
--mask-opaque-bg: rgba(51, 51, 51, 0.8);
--loading-bg: #ededed;
--account-profile-bg-backdrop-filter: rgba(255, 255, 255, 0.7);
--account-profile-bg: rgba(255, 255, 255, 0.9);
--deemphasized-text-color: #666;
--focus-outline: #d4b2f4;
--very-deemphasized-link-color: rgba(138, 43, 226, 0.6);
--very-deemphasized-text-color: rgba(102, 102, 102, 0.6);
--status-direct-background: #e1c8f7;
--main-theme-color: #8a2be2;
--warning-color: #e01f19;
--alt-input-bg: rgba(255, 255, 255, 0.7);
--muted-modal-bg: transparent;
--muted-modal-focus: #999;
--muted-modal-hover: rgba(255, 255, 255, 0.2);
--compose-autosuggest-item-hover: #d9bbf6;
--compose-autosuggest-item-active: #cda4f3;
--compose-autosuggest-outline: #e1c8f7;
--compose-button-halo: rgba(255, 255, 255, 0.1);
}
a {
color: var(--anchor-text);
text-decoration: none;
}
.external-link-with-icon {
display: inline-flex;
align-items: center;
}
.external-link-with-icon {
align-items: center;
display: inline-flex;
}
.status-absolute-date {
font-size: 1.1em;
min-width: 0px;
}
.status-absolute-date,
.status-absolute-date:hover,
.status-absolute-date:visited {
color: var(--deemphasized-text-color);
}
.external-link-with-icon {
align-items: center;
display: inline-flex;
}
.external-link-with-icon {
align-items: center;
display: inline-flex;
}
.external-link-with-icon {
align-items: center;
display: inline-flex;
}
.status-application {
font-size: 1.1em;
overflow: hidden;
white-space: pre-wrap;
word-wrap: break-word;
}
a:visited {
color: var(--anchor-text);
}
.status-application,
a.status-application,
a.status-application:hover {
color: var(--deemphasized-text-color);
}
a.status-application {
align-items: center;
display: inline-flex;
}
.status-favs-reblogs {
align-items: center;
display: flex;
flex-direction: row;
font-size: 1.1em;
}
.status-favs-reblogs,
.status-favs-reblogs:hover,
.status-favs-reblogs:visited {
color: var(--deemphasized-text-color);
}
.status-favs-reblogs-svg {
fill: var(--deemphasized-text-color);
height: 18px;
width: 18px;
}
.status-favs-reblogs span {
margin-left: 5px;
}
.status-application-span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
}
.status-absolute-date time {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
}
.external-link-with-icon .external-link-svg {
margin-left: 4px;
width: 14px;
height: 14px;
fill: var(--deemphasized-text-color);
}
.external-link-with-icon .external-link-svg {
fill: var(--deemphasized-text-color);
height: 14px;
margin-left: 4px;
width: 14px;
}
.external-link-with-icon .external-link-svg {
fill: var(--deemphasized-text-color);
height: 14px;
margin-left: 4px;
width: 14px;
}
.external-link-with-icon .external-link-svg {
fill: var(--deemphasized-text-color);
height: 14px;
margin-left: 4px;
width: 14px;
}
.external-link-with-icon .external-link-svg {
fill: var(--deemphasized-text-color);
height: 14px;
margin-left: 4px;
width: 14px;
}
</style>
</head>
<body class="theme-majesty">
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="fa-retweet" viewBox="0 0 2048 1792"><title>Boost</title><path d="M1344 1504q0 13-9.5 22.5t-22.5 9.5H352q-8 0-13.5-2t-9-7-5.5-8-3-11.5-1-11.5V896H128q-26 0-45-19t-19-45q0-24 15-41l320-384q19-22 49-22t49 22l320 384q15 17 15 41 0 26-19 45t-45 19H576v384h576q16 0 25 11l160 192q7 10 7 21zm640-416q0 24-15 41l-320 384q-20 23-49 23t-49-23l-320-384q-15-17-15-41 0-26 19-45t45-19h192V640H896q-16 0-25-12L711 436q-7-9-7-20 0-13 9.5-22.5T736 384h960q8 0 13.5 2t9 7 5.5 8 3 11.5 1 11.5v600h192q26 0 45 19t19 45z"></path></symbol>
<symbol id="fa-star" viewBox="0 0 1792 1792"><title>Favorite</title><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5T1385 1619q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5T365 1569q0-6 2-20l86-500L89 695q-25-27-25-48 0-37 56-46l502-73L847 73q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"></path></symbol>
</svg>
<div id="sapper">
<div tabindex="0" class="container">
<main>
<div class="timeline-page" aria-busy="false">
<div class="timeline-anchor-container">
<div class="timeline-reveal-container ">
<div class="lazy-timeline">
<div class="timeline" role="feed">
<div class="the-list">
<div class="list-item" id="list-item-100628757483168489">
<article tabindex="0" class="status-article status-in-timeline status-in-own-thread" aria-posinset="0"
aria-setsize="12" aria-label="Status by Nolan (focused)" focus-key="status-toot.cafe/status/100628757483168489//100628757483168489"
delegate-key="status-toot.cafe/status/100628757483168489//100628757483168489">
<div class="status-details"><a class="external-link status-absolute-date external-link-with-icon" aria-label="‎August‎ ‎28‎, ‎2018‎ ‎09‎:‎16‎ ‎AM (opens in new window)"
href="https://toot.cafe/@nolan/100628757483168489" target="_blank" rel="nofollow noopener">
<time title="‎August‎ ‎28‎, ‎2018‎ ‎09‎:‎16‎ ‎AM" datetime="2018-08-28T16:16:24.173Z">‎August‎
‎28‎, ‎2018‎ ‎09‎:‎16‎ ‎AM</time>
<!----><svg xmlns="http://www.w3.org/2000/svg" class="external-link-svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#fa-external-link" /></svg></a>
<a class="external-link status-application" href="https://example.com" target="_blank"
rel="nofollow noopener">
<span class="status-application-span">Example</span>
<!----></a>
<!---->
<a class="status-favs-reblogs status-reblogs" aria-label="Boosted 1 time" href="/statuses/100628757483168489/reblogs"><svg
xmlns="http://www.w3.org/2000/svg" class="status-favs-reblogs-svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#fa-retweet" /></svg>
<span>1</span></a>
<a class="status-favs-reblogs status-favs" aria-label="Favorited 4 times" href="/statuses/100628757483168489/favorites"><svg
xmlns="http://www.w3.org/2000/svg" class="status-favs-reblogs-svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#fa-star" /></svg>
<span>4</span></a></div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment