@bebranded/bb-contents 1.0.116 → 1.0.118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/bb-contents.js +47 -14
  2. package/package.json +1 -1
package/bb-contents.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * BeBranded Contents
3
3
  * Contenus additionnels français pour Webflow
4
- * @version 1.0.116
4
+ * @version 1.0.118
5
5
  * @author BeBranded
6
6
  * @license MIT
7
7
  * @website https://www.bebranded.xyz
@@ -32,11 +32,11 @@
32
32
  window._bbContentsInitialized = true;
33
33
 
34
34
  // Log de démarrage simple (une seule fois)
35
- console.log('bb-contents | v1.0.116');
35
+ console.log('bb-contents | v1.0.118');
36
36
 
37
37
  // Configuration
38
38
  const config = {
39
- version: '1.0.116',
39
+ version: '1.0.118',
40
40
  debug: false, // Debug désactivé pour rendu propre
41
41
  prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
42
42
  youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -413,15 +413,13 @@
413
413
  const originalHeight = img.style.height;
414
414
 
415
415
  img.onload = () => {
416
- // SOLUTION MOBILE SAFARI : Pour les SVG sur mobile Safari, utiliser contain avec optimisations
417
- if (isSVG && isMobile && isSafari) {
418
- // SUR SAFARI MOBILE : Utiliser contain MAIS avec des optimisations pour éviter le flou
416
+ // SOLUTION SAFARI : Pour les SVG sur Safari (desktop et mobile), utiliser contain avec optimisations
417
+ if (isSVG && isSafari) {
418
+ // SUR SAFARI : Utiliser contain MAIS avec des optimisations pour éviter le flou
419
419
  img.style.objectFit = 'contain';
420
420
  img.style.objectPosition = 'center';
421
421
 
422
- // Dimensions avec contraintes pour forcer contain
423
- img.style.width = '100%';
424
- img.style.height = '100%';
422
+ // Contraindre les dimensions sans forcer (max-width/max-height au lieu de width/height 100%)
425
423
  img.style.maxWidth = '100%';
426
424
  img.style.maxHeight = '100%';
427
425
  img.style.boxSizing = 'border-box';
@@ -436,18 +434,23 @@
436
434
  img.style.webkitTransform = 'translateZ(0)';
437
435
  img.style.transform = 'translateZ(0)';
438
436
 
439
- // Conteneur parent pour contraindre et centrer
437
+ // Conteneur parent pour contraindre et centrer (sans forcer les dimensions)
440
438
  const parent = img.parentElement;
441
439
  if (parent) {
440
+ // Vérifier si le parent a déjà des dimensions définies
441
+ const parentStyles = getComputedStyle(parent);
442
+ const hasParentWidth = parentStyles.width && parentStyles.width !== 'auto' && parentStyles.width !== '0px';
443
+ const hasParentHeight = parentStyles.height && parentStyles.height !== 'auto' && parentStyles.height !== '0px';
444
+
442
445
  parent.style.display = 'flex';
443
446
  parent.style.alignItems = 'center';
444
447
  parent.style.justifyContent = 'center';
445
448
  parent.style.overflow = 'hidden';
446
449
  parent.style.boxSizing = 'border-box';
447
450
 
448
- // S'assurer que le parent a des dimensions
449
- if (!parent.style.width) parent.style.width = '100%';
450
- if (!parent.style.height) parent.style.height = '100%';
451
+ // Ne forcer les dimensions que si le parent n'en a pas déjà
452
+ if (!hasParentWidth && !parent.style.width) parent.style.width = '100%';
453
+ if (!hasParentHeight && !parent.style.height) parent.style.height = '100%';
451
454
  }
452
455
  } else if (isSVG && isMobile) {
453
456
  // Pour Chrome mobile, utiliser contain normalement
@@ -467,8 +470,38 @@
467
470
  parent.style.overflow = 'hidden';
468
471
  parent.style.boxSizing = 'border-box';
469
472
  }
473
+ } else if (isSafari) {
474
+ // SUR SAFARI : Optimisations GPU et dimensions pour toutes les images
475
+ // Restaurer les styles CSS après chargement pour les non-SVG
476
+ if (originalObjectFit && originalObjectFit !== 'none') {
477
+ img.style.objectFit = originalObjectFit;
478
+ }
479
+ if (originalObjectPosition && originalObjectPosition !== 'initial') {
480
+ img.style.objectPosition = originalObjectPosition;
481
+ }
482
+
483
+ // Préserver les dimensions naturelles des images
484
+ if (!originalWidth || originalWidth === '') {
485
+ img.style.width = 'auto';
486
+ }
487
+ if (!originalHeight || originalHeight === '') {
488
+ img.style.height = 'auto';
489
+ }
490
+
491
+ // Optimisations GPU pour Safari (desktop et mobile)
492
+ img.style.webkitBackfaceVisibility = 'hidden';
493
+ img.style.backfaceVisibility = 'hidden';
494
+ img.style.webkitTransform = 'translateZ(0)';
495
+ img.style.transform = 'translateZ(0)';
496
+
497
+ // Conteneur parent pour contraindre
498
+ const parent = img.parentElement;
499
+ if (parent) {
500
+ parent.style.overflow = 'hidden';
501
+ parent.style.boxSizing = 'border-box';
502
+ }
470
503
  } else {
471
- // OPTIMISATION: Restaurer les styles CSS après chargement pour les non-SVG
504
+ // OPTIMISATION: Restaurer les styles CSS après chargement pour les non-SVG (autres navigateurs)
472
505
  if (originalObjectFit && originalObjectFit !== 'none') {
473
506
  img.style.objectFit = originalObjectFit;
474
507
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bebranded/bb-contents",
3
- "version": "1.0.116",
3
+ "version": "1.0.118",
4
4
  "description": "Contenus additionnels français pour Webflow",
5
5
  "main": "bb-contents.js",
6
6
  "scripts": {