Created
August 24, 2018 18:45
-
-
Save nolanlawson/6e454fdbf7af6956c03edc65257dab0d to your computer and use it in GitHub Desktop.
CSS grid bug repro
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> | |
| <style> | |
| .status-article { | |
| cursor: pointer; | |
| max-width: calc(-40px + 100vw); | |
| padding: 0; | |
| display: grid; | |
| grid-template-areas: "sidebar author-name author-handle relative-date" | |
| "sidebar spoiler spoiler spoiler" | |
| "sidebar content content content"; | |
| grid-template-columns: min-content minmax(0px, max-content) 1fr min-content; | |
| /* grid-template-rows: repeat(3, min-content); */ | |
| width: 560px; | |
| border-bottom: 1px solid gray; | |
| } | |
| .virtual-list-item { | |
| position: absolute; | |
| top: 0px; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.333s linear; | |
| } | |
| .virtual-list-item.shown { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .virtual-list { | |
| position: relative; | |
| transition: opacity 0.25s linear; | |
| } | |
| .timeline { | |
| position: relative; | |
| } | |
| .lazy-timeline { | |
| width: 100%; | |
| } | |
| main { | |
| position: relative; | |
| width: 602px; | |
| max-width: 100vw; | |
| padding: 0; | |
| box-sizing: border-box; | |
| margin: 30px auto 15px; | |
| background: white; | |
| border: 1px solid gray; | |
| border-radius: 1px; | |
| } | |
| .container { | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| will-change: transform; | |
| position: absolute; | |
| top: 42px; | |
| left: 0px; | |
| right: 0px; | |
| bottom: 0px; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: sans-serif; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| color: black; | |
| background: lightblue; | |
| } | |
| a { | |
| color: darkblue; | |
| text-decoration: none; | |
| } | |
| .status-author-name { | |
| grid-area: author-name; | |
| align-self: center; | |
| margin-left: 5px; | |
| font-size: 1.1em; | |
| min-width: 0px; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .status-author-name, .status-author-name:hover, .status-author-name:visited { | |
| color: black; | |
| } | |
| .status-author-handle { | |
| grid-area: author-handle; | |
| align-self: center; | |
| margin-left: 5px; | |
| color: gray; | |
| font-size: 1.1em; | |
| min-width: 0px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .status-relative-date { | |
| grid-area: relative-date; | |
| align-self: center; | |
| margin-left: 5px; | |
| margin-right: 10px; | |
| font-size: 1.1em; | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| .status-relative-date, .status-relative-date:hover, .status-relative-date:visited { | |
| color: gray; | |
| } | |
| .status-sidebar { | |
| grid-area: sidebar; | |
| margin-right: 15px; | |
| } | |
| .status-sidebar.size-small { | |
| width: 48px; | |
| height: 48px; | |
| } | |
| .status-content { | |
| margin: 10px 10px 10px 5px; | |
| grid-area: content; | |
| word-wrap: break-word; | |
| overflow: hidden; | |
| font-size: 0.9em; | |
| } | |
| p, label, input { | |
| font-size: 1.3em; | |
| } | |
| .status-content p { | |
| margin: 0 0 20px; | |
| } | |
| .status-content p:first-child { | |
| margin: 0 0 20px; | |
| } | |
| .status-content p:last-child { | |
| margin: 0; | |
| } | |
| .avatar.size-small { | |
| width: 48px; | |
| height: 48px; | |
| } | |
| </style> | |
| </head> | |
| <body class="theme-majesty"> | |
| <div id="sapper"> | |
| <div class="container"> | |
| <main> | |
| <div class="lazy-timeline"> | |
| <div class="timeline" role="feed"> | |
| <div class="virtual-list " style="height: 600px;"> | |
| <div class="virtual-list-item shown" style="transform: translateY(0);"> | |
| <article tabindex="0" class="status-article"> | |
| <a class="status-author-name" href="/accounts/5788">foo</a> | |
| <span class="status-author-handle ">@foo</span> | |
| <a class="status-relative-date" href="/statuses/99758467473371700"> | |
| <time title="19 minutes ago" datetime="2018-03-27T23:30:12.377Z">19 minutes ago</time> | |
| </a> | |
| <a class="status-sidebar size-small" href="/accounts/5788" | |
| ><img | |
| class=" avatar size-small" alt="" | |
| src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" /> | |
| </a> | |
| <div class="status-content "><p>This text should NOT be below the image. This text should NOT be below the image. | |
| This text should NOT be below the image. This text should NOT be below the image. This text should NOT be below the image. | |
| This text should NOT be below the image. This text should NOT be below the image.</p> | |
| </div> | |
| </article> | |
| </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