@bebranded/bb-contents 1.0.113 → 1.0.115

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.0.113
+ * @version 1.0.115
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -32,11 +32,11 @@
     window._bbContentsInitialized = true;
 
     // Log de démarrage simple (une seule fois)
-    console.log('bb-contents | v1.0.113');
+    console.log('bb-contents | v1.0.115');
 
     // Configuration
     const config = {
-        version: '1.0.113',
+        version: '1.0.115',
         debug: false, // Debug désactivé pour rendu propre
         prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
         youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -390,6 +390,10 @@
                 let imagesLoaded = 0;
                 const totalImages = images.length;
                 
+                // DÉCLARER isMobile et isSafari AVANT leur utilisation dans img.onload
+                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+                // Détecter spécifiquement Safari (pas Chrome mobile)
+                const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) || /iPhone|iPad|iPod/.test(navigator.userAgent);
                 
                 // OPTIMISATION: Charger les images et appliquer les styles SVG AVANT le clonage
                 // pour éviter les reflows qui causent la saccade de l'animation
@@ -409,43 +413,42 @@
                     const originalHeight = img.style.height;
                     
                     img.onload = () => {
-                        // SOLUTION MOBILE SAFARI : Pour les SVG sur mobile Safari, approche différente
+                        // SOLUTION MOBILE SAFARI : Pour les SVG sur mobile Safari, utiliser contain avec optimisations
                         if (isSVG && isMobile && isSafari) {
-                            // SUR SAFARI MOBILE : Ne PAS utiliser object-fit qui cause du flou
-                            // Utiliser des dimensions fixes et laisser le SVG se dimensionner naturellement
-                            img.style.objectFit = 'none';
+                            // SUR SAFARI MOBILE : Utiliser contain MAIS avec des optimisations pour éviter le flou
+                            img.style.objectFit = 'contain';
                             img.style.objectPosition = 'center';
                             
-                            // Forcer les dimensions du conteneur parent pour contraindre le SVG
+                            // Dimensions avec contraintes pour forcer contain
+                            img.style.width = '100%';
+                            img.style.height = '100%';
+                            img.style.maxWidth = '100%';
+                            img.style.maxHeight = '100%';
+                            img.style.boxSizing = 'border-box';
+                            
+                            // Optimisations pour améliorer le rendu des SVG avec contain
+                            // Utiliser auto au lieu de crisp-edges pour contain
+                            img.style.imageRendering = 'auto';
+                            img.style.webkitBackfaceVisibility = 'hidden';
+                            img.style.backfaceVisibility = 'hidden';
+                            
+                            // Forcer le GPU rendering AVANT d'appliquer contain
+                            img.style.webkitTransform = 'translateZ(0)';
+                            img.style.transform = 'translateZ(0)';
+                            
+                            // Conteneur parent pour contraindre et centrer
                             const parent = img.parentElement;
                             if (parent) {
-                                // S'assurer que le parent a des dimensions fixes
-                                const parentComputed = getComputedStyle(parent);
-                                if (!parentComputed.width || parentComputed.width === 'auto') {
-                                    parent.style.width = '100%';
-                                }
-                                if (!parentComputed.height || parentComputed.height === 'auto') {
-                                    parent.style.height = '100%';
-                                }
-                                
                                 parent.style.display = 'flex';
                                 parent.style.alignItems = 'center';
                                 parent.style.justifyContent = 'center';
                                 parent.style.overflow = 'hidden';
                                 parent.style.boxSizing = 'border-box';
                                 
-                                // Forcer le SVG à prendre la taille du parent sans object-fit
-                                img.style.width = '100%';
-                                img.style.height = '100%';
-                                img.style.maxWidth = '100%';
-                                img.style.maxHeight = '100%';
-                                img.style.boxSizing = 'border-box';
+                                // S'assurer que le parent a des dimensions
+                                if (!parent.style.width) parent.style.width = '100%';
+                                if (!parent.style.height) parent.style.height = '100%';
                             }
-                            
-                            // Améliorer le rendu des SVG sans object-fit
-                            img.style.imageRendering = 'crisp-edges';
-                            img.style.webkitBackfaceVisibility = 'hidden';
-                            img.style.backfaceVisibility = 'hidden';
                         } else if (isSVG && isMobile) {
                             // Pour Chrome mobile, utiliser contain normalement
                             img.style.objectFit = 'contain';
@@ -489,11 +492,6 @@
                     };
                 });
                 
-                // SOLUTION SAFARI MOBILE SIMPLE : Attendre plus longtemps
-                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-                // Détecter spécifiquement Safari (pas Chrome mobile)
-                const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) || /iPhone|iPad|iPod/.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;
@@ -501,17 +499,41 @@
                 const waitForImages = () => {
                     waitTimeout += 100;
                     
-                    // Attendre que TOUTES les images soient chargées (ou s'il n'y a pas d'images, attendre un minimum)
+                    // SAFARI MOBILE : Attendre ABSOLUMENT que TOUTES les images soient chargées
                     if (totalImages === 0) {
                         // Pas d'images, démarrer après un court délai
                         const renderDelay = isMobile ? 500 : 100;
                         setTimeout(() => {
                             startSafariAnimation();
                         }, renderDelay);
-                    } else if (imagesLoaded >= totalImages || waitTimeout >= maxWaitTime) {
-                        // Toutes les images sont chargées OU timeout atteint
-                        // Attendre plus longtemps sur mobile pour le rendu visuel
-                        const renderDelay = isMobile ? 1000 : 200;
+                    } else if (imagesLoaded >= totalImages) {
+                        // SAFARI MOBILE : Vérifier que les images ont vraiment leurs dimensions
+                        let imagesReady = true;
+                        if (isSafari && isMobile) {
+                            images.forEach(img => {
+                                if (!img.complete || img.naturalWidth === 0 || img.naturalHeight === 0) {
+                                    imagesReady = false;
+                                }
+                            });
+                        }
+                        
+                        if (imagesReady) {
+                            // Toutes les images sont chargées ET ont leurs dimensions
+                            // Attendre plus longtemps sur mobile Safari pour le rendu visuel
+                            const renderDelay = isSafari && isMobile ? 1500 : (isMobile ? 1000 : 200);
+                            setTimeout(() => {
+                                startSafariAnimation();
+                            }, renderDelay);
+                        } else {
+                            // Continuer à attendre que les dimensions soient disponibles
+                            setTimeout(waitForImages, 100);
+                        }
+                    } else if (waitTimeout >= maxWaitTime) {
+                        // Timeout atteint : forcer le démarrage mais c'est un fallback
+                        if (bbContents.config.debug) {
+                            console.warn('[MARQUEE] Timeout atteint, certaines images peuvent ne pas être chargées');
+                        }
+                        const renderDelay = isSafari && isMobile ? 1500 : (isMobile ? 1000 : 200);
                         setTimeout(() => {
                             startSafariAnimation();
                         }, renderDelay);
@@ -538,14 +560,6 @@
                     // Cela évite les reflows qui causaient la saccade de l'animation
                     // Les copies héritent automatiquement des styles des images originales
                     
-                    // Vérifier que les images ont une taille visible
-                    let imagesWithSize = 0;
-                    images.forEach(img => {
-                        if (img.offsetWidth > 0 && img.offsetHeight > 0) {
-                            imagesWithSize++;
-                        }
-                    });
-                    
                     // Recalculer la taille après chargement des images
                     const newContentSize = isVertical ? mainBlock.offsetHeight : mainBlock.offsetWidth;
                     
@@ -602,12 +616,9 @@
                     }
 
                     // Fonction d'animation Safari optimisée
-                    let frameCount = 0;
                     let lastTime = performance.now();
                     const animate = (currentTime) => {
                         if (!isPaused) {
-                            frameCount++;
-                            
                             // OPTIMISATION SAFARI MOBILE : Utiliser le temps réel pour une animation plus fluide
                             const deltaTime = isSafari && isMobile ? (currentTime - lastTime) / 16.67 : 1;
                             lastTime = currentTime;

package/package.json

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