Merge pull request #15 from justbetter/feature/blurry-fix

Use borderBoxSize on safari and load images lazy by default
justbetter · Dec 11, 2024 · 4a38144 · 4a38144
2 parents 911703c + 5d65d8e
commit 4a38144
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 10 deletions.
diff --git a/resources/views/image.blade.php b/resources/views/image.blade.php
@@ -26,18 +26,13 @@ class="{{ $class }}"
             <img
                     {!! $attributes ?? '' !!}
                     class="{{ $class }}"
-                    @if($presets['placeholder'] ?? false)
-                        style="background-image: url('{{ $presets['placeholder'] }}'); background-size: contain; background-position: center; background-repeat: no-repeat;"
-                    @endif
                     src="{{ $presets['placeholder'] ?? $image->url() }}"
                     alt="{{ $alt ?? $image->alt() }}"
                     width="{{ $width }}"
                     height="{{ $height }}"
+                    loading="lazy"
                     onload="
-                        this.onload=()=>{
-                            this.style.backgroundImage = null;
-                            this.onload=null
-                        };
+                        this.onload = null;
                         window.responsiveResizeObserver.observe(this);
                     "
             >

diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
@@ -1,14 +1,13 @@
 <script>
 window.responsiveResizeObserver = new ResizeObserver(async (entries) => {
     entries.forEach(entry => {
-        let imgWidth = entry?.devicePixelContentBoxSize?.[0]?.inlineSize || 0;
-
+        let imgWidth = entry?.devicePixelContentBoxSize?.[0]?.inlineSize || (entry.borderBoxSize[0]?.inlineSize * window.devicePixelRatio);
+        
         if (imgWidth === 0) {
             return;
         }
         
         requestAnimationFrame(() => {
-            entry.target.loading = 'lazy';
             entry.target.parentNode.querySelectorAll('source').forEach((source) => {
                 source.sizes = imgWidth + 'px'
             })