Bonjour, je pose ma première question sur ce forum car j'aimerai votre avis :
Sur certains éléments de mon site il y a des transition-delay, par exemple dans le CSS du h1{ ... plusieurs règles; transition-delay: 5s;}, de cette façon si l'élément doit réagir à un :hover ou autre il attend ensuite la durée du transition-delay pour revenir à son état initial.
Cela fonctionne très bien, sauf avec Opéra et Chrome : Ils affichent d'abord l'élément dans un style propre au navigateur puis passent ensuite au CSS que j'ai écrit : ils attendent la durée du transition-delay. Pareil en mettant un temps de transition, par exemple avec h1{ ...plusieurs règles; transition: 1s;}, ils affichent en premier selon leurs règles de style puis transitent vers celles que j'ai écrites.
En constatant que les autres navigateurs prennent directement le CSS qu'on leur écrit en compte, il me semble clair que ces deux là ont un petit souci et j'aimerai savoir comment il doit être surmonté.
Merci pour l'intérêt que vous porterez à cette question, à très bientôt.
Edit: j'avais initialement écrit webkit à la place de chrome et opéra, mais pour plus de clarté j'ai modifié le texte, merci à MatTheCat pour sa remarque.
- Edité par Isigaël LB 17 septembre 2019 à 8:35:11
Webkit n'est pas un navigateur mais une bibliothèque logicielle ; es-tu sûr de ce que tu avances ?
Par ailleurs il est extrêmement probable que ton code soit la cause de ton problème, tu devrais donc le fournir. Le reproduire sur codepen ou jsfiddle serait encore mieux.
Bonjour, merci d'avoir répondu. J'ai deux navigateurs qui je crois sont basés sur Webkit : Opéra et Google Chrome. En tous cas, ce sont ces deux là qui me posent problème. Voici un des bouts de code dont le rendu passe mal sous ces 2 navigateurs :
Sur Firefox, IE et Edge tout se passe bien : le h1 est affiché directement selon le CSS que je lui attribue ; mais sous Opéra et Chrome il s'affiche d'abord sans les règles que j'ai écrite puis fait une transition de 0.35s après 5s de delay pour enfin prendre le style souhaité.
Si je retire la ligne de code concernant la transition tout se passe bien : le h1 est directement affiché selon mes règles, mais dès que je la remets le problème revient.
Pour les autres éléments comportant une transition ou un transition-delay, c'est pareil, ils sont d'abord affichés selon le style du navigateur puis ensuite passent vers mon CSS, cependant puisque tout fonctionne comme je l'espérais avec Firefox, IE et Edge, je ne sais pas quoi faire de mieux.
MatTheCat merci beaucoup pour ta réponse, il semble que le premier lien que tu m'as envoyé réponde à ma question : C'est donc bien un bug( qui concerne en fait chromium), et la solution pour y remédier est de ne pas placer la feuille de style dans le head.
Donc je vais essayer de faire une feuille qui contient uniquement les lignes de transitions qui posent problème pour éviter d'appeler trop de CSS hors du head.
a solution pour y remédier est de ne pas placer la feuille de style dans le head.
Euh. L'appel à la feuille de style ne peut pas se faire autre part que dans le <head>, sinon c'est invalide. C'est dans la page des bugs que tu as vu cette solution ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Lamecarlate oui c'est dans la page des bugs que j'ai vu cette solution, tu fais bien de me rappeler que l'appel des feuilles de styles doit se faire uniquement dans le <head>.
D'ailleurs je retire la mention résolu car en fait ça ne marche pas si bien : au premier chargement de la page le bug apparaît mais si on la rafraîchit le bug disparaît, donc ça ne marche qu'à moitié, mais merci pour les pistes MatTheCat
SandraDI oui finalement IE n'est pas toujours LE gros boulet, et j'avoue que là chromium me surprend d'avoir une telle faille.
Du coup, si vous avez une idée de comment surmonter ce problème lié à chromium je vous en serais très reconnaissant, merci d'avance.
- Edité par Isigaël LB 18 septembre 2019 à 7:37:46
Il me semble que la syntaxe de transition doit faire apparaître le nom de la propriété sur laquelle on veut faire une transition
transition: margin-top 0.35s 5s;
Mais je me demande également ce que tu veux faire avec cette transition car si la propriété est fixée dès le départ, la transition n'est pas très utile.
Les questions que j'ai posées ici concernaient un projet de framework que je tenais secret mais que désormais je partage : il s'agit d'une méthode CSS que j'ai mise au point pour pouvoir créer des boutons clickables en pur CSS, sans Javascript. Cela permet de faire des pages interactives au clic en full css.
Pour vous remercier de m'avoir aidé et/ou simplement répondu, voici un lien vers ma page Linkedin sur laquelle je partage ce framework : www.linkedin.com/in/isigael-web-creation
Transitions avec Opéra et Google Chrome (webkit ?)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Alain - Linkedin