@bebranded/bb-contents 1.0.96 → 1.0.98

package/bb-contents.js

@@ -320,13 +320,9 @@
                         ${isVertical ? 'min-height: 100px;' : ''}
                     `;
 
-                    // Créer 3 copies pour le défilement infini
-                    const repeatBlock1 = mainBlock.cloneNode(true);
-                    const repeatBlock2 = mainBlock.cloneNode(true);
-                    
+                    // Ne créer que le mainBlock pour l'instant
+                    // Les copies seront créées après le chargement des images
                     scrollContainer.appendChild(mainBlock);
-                    scrollContainer.appendChild(repeatBlock1);
-                    scrollContainer.appendChild(repeatBlock2);
                     mainContainer.appendChild(scrollContainer);
                     
                     element.innerHTML = '';
@@ -368,6 +364,12 @@
                         speed, direction, gap, isVertical, useAutoHeight, contentSize, gapSize
                     });
                 } else {
+                    // Solution standard : créer les copies maintenant (les navigateurs non-Safari gèrent mieux)
+                    const repeatBlock1 = mainBlock.cloneNode(true);
+                    const repeatBlock2 = mainBlock.cloneNode(true);
+                    scrollContainer.appendChild(repeatBlock1);
+                    scrollContainer.appendChild(repeatBlock2);
+                    
                     // Solution standard pour autres navigateurs
                     this.initStandardAnimation(element, scrollContainer, mainBlock, {
                         speed, direction, pauseOnHover, gap, isVertical, useAutoHeight, contentSize, gapSize, step
@@ -389,65 +391,40 @@
                 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 => {
-                    // 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 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
-                    }
-                    
-                    // Charger l'image si nécessaire
-                    if (img.complete && img.naturalWidth > 0) {
-                        // Image déjà chargée, ne rien toucher
-                        imagesLoaded++;
-                    } else {
+                // SOLUTION MOBILE : Charger toutes les images AVANT de créer les copies pour éviter le flou
+                const loadImage = (img) => {
+                    return new Promise((resolve) => {
+                        if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
+                            // Image déjà chargée et rendue
+                            imagesLoaded++;
+                            resolve();
+                            return;
+                        }
+                        
                         if (img.dataset.src && !img.src) {
                             img.src = img.dataset.src;
                         }
                         
-                        // 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
+                        // Utiliser eager sur mobile pour éviter le flou de lazy loading
+                        if (!img.loading && isMobile) {
+                            img.loading = 'eager';
                         }
                         
                         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++;
+                            // Forcer un reflow pour s'assurer que l'image est rendue
+                            void img.offsetHeight;
+                            resolve();
                         };
                         img.onerror = () => {
                             imagesLoaded++;
+                            resolve(); // Résoudre même en cas d'erreur
                         };
-                    }
-                });
+                    });
+                };
+                
+                // Charger toutes les images en parallèle
+                Promise.all(Array.from(images).map(loadImage));
                 
                 // Timeout plus long sur mobile pour laisser le temps aux images de se charger
                 const maxWaitTime = isMobile ? 5000 : 3000; // 5 secondes sur mobile
@@ -457,11 +434,19 @@
                     waitTimeout += 100;
                     
                     if (imagesLoaded >= totalImages || imagesLoaded === 0 || waitTimeout >= maxWaitTime) {
-                        // Attendre plus longtemps sur mobile pour le rendu visuel
-                        const renderDelay = isMobile ? 1000 : 200;
-                        setTimeout(() => {
-                            startSafariAnimation();
-                        }, renderDelay);
+                        // Attendre un frame pour le rendu complet, surtout sur mobile
+                        requestAnimationFrame(() => {
+                            requestAnimationFrame(() => {
+                                // Maintenant créer les copies avec les images complètement chargées
+                                const repeatBlock1 = mainBlock.cloneNode(true);
+                                const repeatBlock2 = mainBlock.cloneNode(true);
+                                scrollContainer.appendChild(repeatBlock1);
+                                scrollContainer.appendChild(repeatBlock2);
+                                
+                                // Démarrer l'animation
+                                startSafariAnimation();
+                            });
+                        });
                     } else {
                         setTimeout(waitForImages, 100);
                     }

package/package.json

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