CSS overscroll-behavior

...26			27			<li id="1151966763892006931" class="tweet h-entry" data-pagefind-index-attrs="id">28		29			<div class="tweet-text e-content" data-pagefind-body="">Is the useful <code>overscroll-behavior</code> coming to WebKit? Inquiring minds (me) would like to know!30<a href="https://caniuse.com/#feat=css-overscroll-behavior" class="tweet-url" data-pagefind-index-attrs="href">caniuse.com/#feat=css-overscroll-behavior</a><is-land on:visible=""><div class="tweet-medias"><template data-island=""><a href="https://caniuse.com/#feat=css-overscroll-behavior"><img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fcaniuse.com%2F%23feat%3Dcss-overscroll-behavior/small/onerror/" alt="OpenGraph image for caniuse.com/#feat=css-overscroll-behavior" loading="lazy" decoding="async" width="375" height="197" class="tweet-media tweet-media-og" onerror="this.parentNode.remove()"></a></template></div></is-land></div>31			<span class="tweet-metadata">32				33				<a href="https://twitter.com/zachleat/status/1151966763892006931" class="tag tag-icon u-url" data-pagefind-index-attrs="href"><span class="sr-only">On twitter.com </span><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Ftwitter.com%2F/" alt="Twitter logo" width="27" height="27"></a>34				35				<a href="/twitter/" class="tag tag-naked tag-lite tag-avatar"><img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2F/" width="52" height="52" alt="zachleat’s avatar" class="tweet-avatar"></a>36				<span class="tag tag-lite tag-favorite">❤️ 5<span class="sr-only"> Favorites</span></span>37				<time class="tag tag-naked tag-lite dt-published" datetime="2019-07-18T21:27:33.000Z">2019 Jul 18</time>38				<span class="tag tag-naked tag-lite sr-only">Mood +<strong class="tweet-sentiment">4</strong> 🙂</span>39			</span>40		</li>41			42		</ol>43		</main>44		<footer>...

...17  border-radius: var(--border-radius);18  display: flex;19  align-items: stretch;20  flex-direction: column;21  /* https://caniuse.com/css-overscroll-behavior */22  overscroll-behavior: contain;23}24.root.portrait {25  width: min(320px, calc(100% - 2em));26  min-height: max(20vh, 380px);27}28.root.landscape {29  width: min(750px, calc(100% - 2em));30  min-height: max(20vh, 380px);31}32.root [data-reach-dialog-description] {33  flex: 1;34}35.overlayTray {36  backdrop-filter: blur(1px);37  display: flex;38  justify-content: flex-end;39  align-items: center;40  flex-direction: column;41  overflow: hidden;42  z-index: var(--z-max);43  position: fixed;44  top: 0;45  right: 0;46  bottom: 0;47  left: 0;48}49.rootTray {50  --tray-min-height: 200px;51  background-color: var(--white);52  width: min(750px, calc(100% - 1em));53  height: var(--tray-min-height) !important;54  max-height: min(var(--tray-min-height), 90vh);55  /*max-height trumps height, but not min-height */56  padding-bottom: env(safe-area-inset-bottom);57  display: flex;58  flex-direction: column;59  justify-content: flex-start;60  /* transform: translateY(var(--tray-min-height)); */61  outline: none;62  overflow: auto;63  /* https://caniuse.com/css-overscroll-behavior */64  overscroll-behavior: contain;65}66.rootTray.isOpen {67  transform: translateY(0);68}69.viewport {70  height: calc(var(--tray-min-height) - 14%) !important;...

...17    padding: var(--component-padding);18    display: flex;19    align-items: stretch;20    flex-direction: column;21    /* https://caniuse.com/css-overscroll-behavior */22    overscroll-behavior: contain;23}24.root [data-reach-alert-dialog-description] {25    flex: 1;26}27.actions {28    display: flex;29    flex-direction: column;30}31@media (orientation: landscape) {32    .actions {33        flex-direction: row;34        justify-content: space-between;35    }...