28172 sujets

CSS et mise en forme, CSS3

Bonjour, je pose ma première question sur ce forum car j'ai besoin de votre avis.

Voici un bout de code dont le rendu est conforme à me attentes sur Firefox, IE et Edge, mais pas sur Opéra et Chrome :
h1{
  position: absolute;
  width: 80%;
  margin-left: 10%;
  text-align: center;
  margin-top: 1em;
  font-size: 3em;
  margin-bottom: 0em;
  transition: 0.35s 5s;
}


Avec Chrome et Opéra, le problème tient au fait qu'ils prennent la transition en compte et affichent d'abord l'élément selon leurs propres règles, puis passent vers le CSS que je leur ai fourni en suivant les instructions de la ligne transition.
Les autres navigateurs que j'ai testés affichent directement selon mes règles, la ligne transition étant normalement là pour décrire le comportement de l'élément après qu'il ait réagi à un hover ou autre.
Du coup en ouvrant ma page web sur ces deux navigateurs je me retrouve avec un mauvais affichage de tous les éléments ayant une ligne transition dans leur CSS.
Je précise qu'en enlevant la ligne transition l'affichage est conforme à ma feuille de style, mais le problème revient dès que je la remets.

Comment remédier à ce problème SVP?
Modifié par Ayzs (17 Sep 2019 - 08:39)
Merci pour ta réponse Jean-Pierre,
je viens d'essayer la solution que tu dis, mais ça ne marche pas :
h1{
  position: absolute !important;
  width: 80% !important;
  margin-left: 10% !important;
  text-align: center !important;
  margin-top: 1em !important;
  font-size: 3em !important;
  margin-bottom: 0em !important;
  transition: 0.35s 5s;
}

La ligne transition continue d'être prise en compte et le h1 est d'abord affiché selon les règles du navigateur webkit avant d'afficher mon CSS.

Quelqu'un a-t-il déjà rencontré ce problème? Utilisez-vous des transitions, et si oui comment gérez-vous avec les navigateurs webkit?
Merci
Modifié par Ayzs (17 Sep 2019 - 10:02)
Bonsoir Jean-Pierre Bruneau,
pour vous remercier de m'avoir répondu je vous offre le fruit du projet sur lequel je travaillais quand j'ai posé ma question ici.
Il s'agit d'un framework en pur CSS qui permet de créer des boutons qui réagissent au clic et qui peuvent changer l'aspect d'une page web, le tout sans Javascript.

Vous pouvez télécharger le code source en visitant ma page Linkedin, il suffit de trouver
le dernier post en date du 08/10/2019, puis de télécharger le dossier zippé dont le
lien est fourni dans le message.
Toute la doc est en Anglais mais je prévois de faire une version française prochainement.
Merci pour vos retours et bon codage!

Lien Linkedin : www.linkedin.com/in/isigael-web-creation

Isigaël