@bebranded/bb-contents 1.0.94-test → 1.0.96

package/bb-contents.js

@@ -385,46 +385,70 @@
                 const totalImages = images.length;
                 
                 
-                // OPTIMISATION: Charger les images sans forcer les dimensions
+                // SOLUTION MOBILE : Amélioration du rendu des images sur mobile
+                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || 
+                                 (window.innerWidth <= 768 && /Chrome|CriOS/i.test(navigator.userAgent));
+                
+                // OPTIMISATION: Charger les images en respectant le CSS Webflow
                 images.forEach(img => {
-                    if (img.dataset.src && !img.src) {
-                        img.src = img.dataset.src;
-                        img.loading = 'eager';
-                    }
+                    // Préserver les styles CSS existants AVANT toute modification
+                    const computedStyle = getComputedStyle(img);
+                    const originalObjectFit = img.style.objectFit || computedStyle.objectFit;
+                    const originalObjectPosition = img.style.objectPosition || computedStyle.objectPosition;
+                    const originalWidth = computedStyle.width;
+                    const originalHeight = computedStyle.height;
                     
-                    // OPTIMISATION: Préserver les styles CSS existants (object-fit, etc.)
-                    const originalObjectFit = img.style.objectFit || getComputedStyle(img).objectFit;
-                    const originalObjectPosition = img.style.objectPosition || getComputedStyle(img).objectPosition;
-                    const originalWidth = img.style.width;
-                    const originalHeight = img.style.height;
+                    // OPTIMISATION MOBILE : Améliorer le rendu des images sur mobile (sans transform sur l'image)
+                    if (isMobile) {
+                        // Forcer le rendu haute qualité sur mobile sans transform (évite conflit avec translate3d du parent)
+                        img.style.backfaceVisibility = 'hidden';
+                        img.style.webkitBackfaceVisibility = 'hidden';
+                        // Ne PAS mettre transform sur l'image car le parent utilise translate3d
+                        // Cela évite les problèmes de flou causés par les transformations multiples
+                        img.style.willChange = 'auto'; // Éviter will-change qui peut causer du flou
+                    }
                     
-                    img.onload = () => {
-                        // OPTIMISATION: Restaurer les styles CSS après chargement
-                        if (originalObjectFit && originalObjectFit !== 'none') {
-                            img.style.objectFit = originalObjectFit;
-                        }
-                        if (originalObjectPosition && originalObjectPosition !== 'initial') {
-                            img.style.objectPosition = originalObjectPosition;
+                    // Charger l'image si nécessaire
+                    if (img.complete && img.naturalWidth > 0) {
+                        // Image déjà chargée, ne rien toucher
+                        imagesLoaded++;
+                    } else {
+                        if (img.dataset.src && !img.src) {
+                            img.src = img.dataset.src;
                         }
                         
-                        // OPTIMISATION: Préserver les dimensions naturelles des images
-                        if (!originalWidth || originalWidth === '') {
-                            img.style.width = 'auto';
-                        }
-                        if (!originalHeight || originalHeight === '') {
-                            img.style.height = 'auto';
+                        // OPTIMISATION MOBILE : Utiliser eager sur mobile pour éviter le flou de lazy loading
+                        if (!img.loading) {
+                            img.loading = isMobile ? 'eager' : 'lazy'; // eager sur mobile pour meilleur rendu
                         }
                         
-                        imagesLoaded++;
-                    };
-                    img.onerror = () => {
-                        imagesLoaded++;
-                    };
+                        img.onload = () => {
+                            // OPTIMISATION: Restaurer les styles CSS après chargement
+                            if (originalObjectFit && originalObjectFit !== 'none') {
+                                img.style.objectFit = originalObjectFit;
+                            }
+                            if (originalObjectPosition && originalObjectPosition !== 'initial') {
+                                img.style.objectPosition = originalObjectPosition;
+                            }
+                            
+                            // OPTIMISATION MOBILE : Respecter les dimensions CSS de Webflow
+                            // Ne PAS forcer auto si les dimensions CSS sont définies dans Webflow
+                            // Le CSS de Webflow prend toujours le dessus
+                            
+                            // Forcer le recalcul pour mobile (important pour le rendu)
+                            if (isMobile) {
+                                // Force reflow pour meilleur rendu sans ajouter de transform
+                                void img.offsetHeight;
+                            }
+                            
+                            imagesLoaded++;
+                        };
+                        img.onerror = () => {
+                            imagesLoaded++;
+                        };
+                    }
                 });
                 
-                // SOLUTION SAFARI MOBILE SIMPLE : Attendre plus longtemps
-                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-                
                 // Timeout plus long sur mobile pour laisser le temps aux images de se charger
                 const maxWaitTime = isMobile ? 5000 : 3000; // 5 secondes sur mobile
                 let waitTimeout = 0;
@@ -451,7 +475,10 @@
                         images.forEach(img => {
                             if (img.dataset.src && !img.src) {
                                 img.src = img.dataset.src;
-                                img.loading = 'eager';
+                                // Ne pas forcer eager sur mobile, laisser le lazy loading
+                                if (!img.loading && !isMobile) {
+                                    img.loading = 'eager';
+                                }
                             }
                         });
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bebranded/bb-contents",
-  "version": "1.0.94-test",
+  "version": "1.0.96",
   "description": "Contenus additionnels français pour Webflow",
   "main": "bb-contents.js",
   "scripts": {