css optimizing

src/material/BottomSheet.module.css

@@ -3,7 +3,7 @@
   composes: cardGutSkip from "./cards.module.css";
   composes: cardNoPad from "./cards.module.css";
   border: none;
-  position: absolute;
+  position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -14,11 +14,20 @@
   overscroll-behavior: none;
   max-height: 100vh;
   max-height: 100dvh;
+  height: 95%;
+  contain: strict;
+  contain-intrinsic-size: 100% 95%;
 
   &::backdrop {
+    transition-property: background-color, opacity;
+    transition-duration: 120ms;
+    transition-timing-function: var(--tutu-anim-curve-std);
+    transition-behavior: allow-discrete;
+  }
+
+  &[open]::backdrop {
     background-color: black;
     opacity: 0.5;
-    transition: opacity 220ms var(--tutu-anim-curve-std);
   }
 
   box-shadow: var(--tutu-shadow-e16);
@@ -47,8 +56,9 @@
       bottom: 0;
       height: 100vh;
       height: 100dvh;
-      max-height: 100vh;
+
-      max-height: 100dvh;
+      contain-intrinsic-size: 100% 100vh;
+      contain-intrinsic-size: 100% 100dvh;
     }
   }
 
@@ -59,6 +69,7 @@
 
     &::backdrop {
       opacity: 0;
+      background-color: transparent;
     }
 
     & * {
@@ -70,6 +81,10 @@
     top: unset;
     transform: translateX(-50%);
     bottom: 0;
+    content: content;
+    height: unset;
+    contain: content;
+    contain-intrinsic-size: unset;
 
     @media (max-width: 560px) {
       & {

src/timelines/MediaAttachmentGrid.tsx

@@ -124,6 +124,7 @@ const MediaAttachmentGrid: Component<{
       {
         width: `${width}px`,
         height: `${height}px`,
+        "contain-intrinsic-size": `${width}px ${height}px`,
       },
       accentColor ? { "--media-color-accent": accentColor } : {},
     );

src/timelines/TootList.tsx

@@ -5,6 +5,7 @@ import {
   ErrorBoundary,
   type Ref,
   createSelector,
+  createRenderEffect,
 } from "solid-js";
 import { type mastodon } from "masto";
 import { vibrate } from "../platform/hardware";
@@ -14,6 +15,8 @@ import { useHeroSignal, useHeroSource } from "../platform/anim";
 import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import { useNavigate } from "@solidjs/router";
+import { createElementSize } from "@solid-primitives/resize-observer";
+import "./toot-list.css"
 
 const TootList: Component<{
   ref?: Ref<HTMLDivElement>;
@@ -110,6 +113,15 @@ const TootList: Component<{
     openFullScreenToot(status, element, true);
   };
 
+  const listenElementHeight = (
+    e: HTMLElement,
+    updateHeight: (height: number) => void,
+  ) => {
+    const size = createElementSize(e);
+
+    createRenderEffect(() => updateHeight(size.height));
+  };
+
   return (
     <ErrorBoundary
       fallback={(err, reset) => {

src/timelines/toot-list.css

@@ -0,0 +1,3 @@
+.toot-list * {
+  content-visibility: auto;
+}

src/timelines/toot.module.css

@@ -4,6 +4,7 @@
   --toot-avatar-size: 40px;
   margin-block: 0;
   position: relative;
+  contain: content;
 
   &.toot {
     /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
@@ -122,6 +123,7 @@
   overflow: hidden;
   z-index: 1;
   position: relative;
+  contain: content;
 
   >img {
     max-width: 100%;
@@ -240,6 +242,7 @@
     border-radius: 2px;
     border: 1px solid var(--tutu-color-surface-d);
     transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);
+    contain: strict;
 
     &:hover,
     &:focus-visible {