La compression (csspacker) des css case la syntaxe de calc()

Patrice Maziero · le 16/09/19 à 10:43

Lorsque la compression de css est activée sur notre JCMS, les styles embarquant des calculs css calc() sont KO.

Ceci vient du fait que JCMS supprime les espaces  dans le css, or la syntaxe calc necessite ces espaces pour être interpreté.

Version : JCMS 9 SP4

 

Sans compression:

@media screen and (min-width: 992px)
front-md.less:61
.hero .photo  {
  1. heightcalc(56vh + 4vh);
}

 

Avec compression : le navigateur indique "Invalid property value"

@media screen and (min-width: 992px)
csspacker.jsp?vtandard.css:71
.hero .photo  {
  1. heightcalc(56vh+4vh);
}
 

NB: l'affichage devient correct si je rajoute les espaces "à la main" via le debugger du navigateur

 

Est-ce que ce problème est corrigé sur les version plus recentes?

 

Autre sujet:

j'ai remarque que le compilateur less de JCMS9 SP4 ne sais pas compiler correctement les calc, pour l'instant je fait la compilation des less à la main via un compilateur tier (lessc) qui par ailleurs est plus performant.

#1

Bonjour,

J'ai eu le même problème, et la solution de dépannage c'était de rajouter le tilt avec des guillemets dans le calc:

Au lieu de ça : width: calc(100% + 30px);
J'ai mis ça : width: calc(~"100% + 30px");

Ahmed Fehri · le 04/12/19 à 15:00
4 pts
Frédéric Touitou · le 16/09/19 à 14:45

Un ticket de support a été ouvert pour traiter cette problématique.

Ses conclusions seront reportées ici.

1 pt