修复主题动画掉帧问题

themes/Ying/assets/css/main.css

@@ -2990,8 +2990,6 @@ input[type=submit] {
     display: block;
     max-width: 100%;
     height: auto;
-    content-visibility: auto;
-    contain-intrinsic-size: 700px auto;
 }
 
 .post-content .sen-image-frame,
@@ -3006,6 +3004,8 @@ input[type=submit] {
     transform: translateY(14px);
     transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                 transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
+    content-visibility: auto;
+    contain-intrinsic-size: auto 400px;
 }
 
 .post-content .sen-image-frame.is-visible,
@@ -3046,15 +3046,16 @@ input[type=submit] {
     text-overflow: ellipsis;
     pointer-events: none;
     opacity: 0;
-    transform: translateY(4px);
+    transform: translateY(4px) translateZ(0);
     transition: opacity 0.4s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                 transform 0.4s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
+    will-change: transform, opacity;
 }
 
 .post-content .sen-image-frame.is-visible[data-title]::after,
 .entry-content .sen-image-frame.is-visible[data-title]::after {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) translateZ(0);
 }
 
 [data-theme="dark"] .post-content .sen-image-frame[data-title]::after,
@@ -3688,6 +3689,53 @@ input[type=submit] {
     }
 }
 
+/* ── Image Grid ── */
+.img-grid {
+    display: grid;
+    gap: 4px;
+    margin: 0.6rem 0;
+}
+
+.img-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.img-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.img-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+/* Penetrate Markdown <p> wrappers so images become grid items */
+.img-grid > p {
+    display: contents;
+}
+
+.img-grid .sen-image-frame {
+    margin: 0;
+    aspect-ratio: 1 / 1;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+}
+
+.img-grid .sen-image-frame > img {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+/* Suppress title overlay inside grids */
+.img-grid .sen-image-frame[data-title]::after {
+    display: none;
+}
+
+/* Mobile: reduce to 2 columns */
+@media screen and (max-width: 480px) {
+    .img-grid.cols-3,
+    .img-grid.cols-4 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 .floating-tools a {
     width: 40px;
     height: 40px;