Bonjour à tous,
J'ai un petit souci de compatibilité que je ne parviens toujours pas à bien comprendre.
Voilà mon problème : J'ai des annonces web, sur ces annonces je dois permettre de mettre en visibilité une brève descriptions. J'ai donc ajouter une description et avec un snippet conçu sur mesure, j'ai ajouter du CSS permettant de mettre la description sur 3 lignes mais de cacher le reste des paragraphes/lignes. Quelques choses de très simple en apparence. Mais j'ai remarquer un gros soucis au niveau du design sur Safari mobile et Mac. J'ai alors essayer de chercher si Safari ne prenait pas en charge un des éléments CSS mais je n'ai pas trouver de solution pour le moment.
Je me suis donc dit qu'une personne sur Alsacreations aurait déjà rencontrer le problème.
Voici un exemple plus parlant ici :
Sur chrome & compagnies
Sur Safari Mac/Mobile
Auriez vous une idée du problème. Je pensais que safari ne prenait pas en charge webkit mais non !
Le snippet code me permettant de cacher la description de l'annonce sur 3 lignes comme sur la version chrome :
Est ce que vous avez une idée ? Ou avez vous déjà eux le même problème ?
Pourtant sur tous les autres navigateurs ça fonctionne correctement sauf sur Safari !
Merci d'avance pour votre aide !!
J'ai un petit souci de compatibilité que je ne parviens toujours pas à bien comprendre.
Voilà mon problème : J'ai des annonces web, sur ces annonces je dois permettre de mettre en visibilité une brève descriptions. J'ai donc ajouter une description et avec un snippet conçu sur mesure, j'ai ajouter du CSS permettant de mettre la description sur 3 lignes mais de cacher le reste des paragraphes/lignes. Quelques choses de très simple en apparence. Mais j'ai remarquer un gros soucis au niveau du design sur Safari mobile et Mac. J'ai alors essayer de chercher si Safari ne prenait pas en charge un des éléments CSS mais je n'ai pas trouver de solution pour le moment.
Je me suis donc dit qu'une personne sur Alsacreations aurait déjà rencontrer le problème.
Voici un exemple plus parlant ici :
Sur chrome & compagnies
Sur Safari Mac/Mobile
Auriez vous une idée du problème. Je pensais que safari ne prenait pas en charge webkit mais non !
Le snippet code me permettant de cacher la description de l'annonce sur 3 lignes comme sur la version chrome :
.lf-item-info>ul li {
display:block;
max-width: 100%;
white-space: normal;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Est ce que vous avez une idée ? Ou avez vous déjà eux le même problème ?
Pourtant sur tous les autres navigateurs ça fonctionne correctement sauf sur Safari !
Merci d'avance pour votre aide !!