From c917c83d5dd70244b4faf9bf6ee6184335d35e41 Mon Sep 17 00:00:00 2001
From: zyxd <zyxd@syncraft.ru>
Date: Thu, 11 Sep 2025 21:13:24 +0400
Subject: [PATCH] =?UTF-8?q?Image=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BF=D0=B8?=
 =?UTF-8?q?=D1=81=D0=B0=D0=BD=20=D1=82=D0=B0=D0=BA,=20=D1=87=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=8B=20=D0=BE=D0=B1=D0=BE=D0=B9=D1=82=D0=B8=20=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B3=20Chrome,=20=D0=BD=D0=BE=20=D0=BD=D0=B5=20=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=B7=D0=B8=D1=82=D1=8C=D1=81=D1=8F=20=D1=81=20=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=BE=D0=BF=D1=80=D0=B5=D0=B4=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=D0=BC=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=B9=20noscript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Image.svelte | 61 ++++++++++++---------------------
 1 file changed, 21 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 906dfe0..08d6859 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -1,19 +1,18 @@
-<noscript>
-  <img
-    {loading}
-    {...others}
-  />
-</noscript>
+<img
+  bind:this={node}
+  class:loaded
+  class="noscript-visible"
+  {loading}
+  {...others}
+/>
 
-{#if dynamic}
-  <img
-    {loading}
-    {...others}
-    bind:this={node}
-    class="dynamic"
-    class:visible
-  />
-{/if}
+<noscript>
+  <style>
+    .noscript-visible {
+      opacity: 1 !important;
+    }
+  </style>
+</noscript>
 
 <script>
   let {
@@ -22,12 +21,7 @@
   } = $props()
 
   let node = $state()
-  let visible = $state(false)
-  let dynamic = $state(false)
-
-  $effect(() => {
-    dynamic = true
-  })
+  let loaded = $state(false)
 
   $effect(() => {
     if (!node) {
@@ -35,39 +29,26 @@
     }
     
     if (node.complete) {
-      visible = true
+      loaded = true
     } else {
-      node.addEventListener('load', () => visible = true, { once: true })
+      node.addEventListener('load', () => loaded = true, { once: true })
     }
   })
 </script>
 
 <style lang="scss">
-  /* 
-    Ideally, <noscript> could use display: contents so it wouldn't create a block container.
-    However, due to a Chrome bug, we must set it to display: block to ensure proper layout.
-    This ensures that fallback images inside <noscript> scale correctly to the container width.
-    https://issues.chromium.org/issues/41179501
-  */
-  noscript,
   img {
     display: block;
     max-width: 100%;
     width: 100%;
     height: auto;
-  }
-  
-  img {
     object-fit: cover;
     object-position: top center;
+    transition: opacity 0.4s ease;
+    opacity: 0;
 
-    &.dynamic {
-      transition: opacity 0.4s ease;
-      opacity: 0;
-
-      &.visible {
-        opacity: 1;
-      }
+    &.loaded {
+      opacity: 1;
     }
   }
 </style>
\ No newline at end of file