src/platform/StackedRouter.tsx

@@ -306,7 +306,10 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
     }
     const [fig0] = event.touches;
     const { x, width } = event.currentTarget.getBoundingClientRect();
-    if (fig0.clientX < x - 22 || fig0.clientX > x + 22) {
+    if (
+      fig0.clientX - fig0.radiusX < x - 22 ||
+      fig0.clientX + fig0.radiusX > x + 22
+    ) {
       return;
     }
     origX = x;
@@ -413,10 +416,10 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
                   class="StackedPage"
                   onCancel={[popFrame, 1]}
                   onClick={[onDialogClick, popFrame]}
-                  on:touchstart={onDialogTouchStart}
-                  on:touchmove={onDialogTouchMove}
-                  on:touchend={onDialogTouchEnd}
-                  on:touchcancel={onDialogTouchCancel}
+                  onTouchStart={onDialogTouchStart}
+                  onTouchMove={onDialogTouchMove}
+                  onTouchEnd={onDialogTouchEnd}
+                  onTouchCancel={onDialogTouchCancel}
                   id={frame().rootId}
                 >
                   <StaticRouter url={frame().path} {...oprops} />

src/timelines/MediaAttachmentGrid.css

@@ -12,7 +12,7 @@
     min-width: 40px;
     object-fit: contain;
     max-width: 100%;
-    background-color: var(--media-color-accent, var(--tutu-color-surface-d));
+    background-color: var(--tutu-color-surface-d);
     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);

src/timelines/toot-components/PreviewCard.css

@@ -19,10 +19,6 @@
     background-color: var(--tutu-color-surface);
     max-width: 100%;
     height: auto;
-
-    &.loaded {
-      background-color: #eeeeee;
-    }
   }
 
   &:hover,

src/timelines/toot-components/PreviewCard.tsx

@@ -5,14 +5,6 @@ import { Title, Body1 } from "../../material/typography";
 import { averageColorHex } from "../../platform/blurhash";
 import "./PreviewCard.css";
 
-function onResetImg(event: Event & { currentTarget: HTMLImageElement }) {
-  event.currentTarget.classList.remove("loaded");
-}
-
-function onImgLoaded(event: Event & { currentTarget: HTMLImageElement }) {
-  event.currentTarget.classList.add("loaded");
-}
-
 export function PreviewCard(props: {
   src: mastodon.v1.PreviewCard;
   alwaysCompact?: boolean;
@@ -89,8 +81,6 @@ export function PreviewCard(props: {
     >
       <Show when={props.src.image}>
         <img
-          onLoadStart={onResetImg}
-          onLoad={onImgLoaded}
           crossOrigin="anonymous"
           src={props.src.image!}
           width={props.src.width || undefined}