Created
August 28, 2018 16:51
-
-
Save nolanlawson/13f026c56e54810b2d1bcda6d6d608ad to your computer and use it in GitHub Desktop.
Repro Edge CSS grid bug
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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