27802 sujets

CSS et mise en forme, CSS3

Bonjour à tous !
J'ai créé un menu déroulant avec un hamburger. Lorsque je clique dessus il se transforme en croix et le menu se déroule. Sous Firefox ça marche très bien.
Par contre, sous Chrome j'ai un comportement étrange. Le hamburger et le menu fonctionnent bien mais pendant le déroulement de l'animation il y a 2 carrés bleus qui partent du hamburger et qui vont dans 2 directions différentes et inversement.
Je ne sais pas ce que sont ces carrés. Et je ne sais pas comment les intercepter pour connaître leur nature et ainsi corriger mon code.

J'ai mis le composant sur une page dédiée pour que vous puissiez le voir : https://www.sarinoty.com/Refonte/tests/test.html

Je ne serais pas contre un petit coup de pouce...
Je vous remercie d'avance !
Effectivement, sur un mobile, un petit carré bleu turquoise apparaît, seulement à la fermeture du menu. Il se dirige de la gauche, en haut et vers la croix et est de la même couleur que le background de cette croix. Il se ferme à la même vitesse que le menu. Si tu supprime le background de la croix, tu devrais supprimer le ou les carrés bleus.
Le truc c'est que je n'ai pas mis de background à la croix. C'est une div avec un span accompagné de before et after.
C'est Chrome qui crée cette espèce de couleur de background bleue au clic, je ne sais pas pourquoi.
Dans le doute j'ai mis un "background: none" à la div mais ça ne change rien.

Autre chose, c'est bien uniquement sur mobile que le problème apparaît. Je l'avais sur mon ordi quand je simulais le comportement d'un mobile dans les outils de développement.
Modifié par Vahia (15 Jun 2022 - 19:43)
Modérateur
bonsoir, ce n'est apparemment que sur le tactile et j'imagine que c'est le même bleu que celui des éléments de liste quand on clique dessus du doigt ? Si c'est ça, c'est le navigateur qui te notifie visuellement que tu as bien cliqué l’élément. Je n'y vois vraiment d'autre raison . Le comportement est similaire avec le navigateur SamSung Smiley cligne

cdt
Modérateur
Ah oui je le vois aussi ! Pwah véner le truc...
#hambi-menu {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

et PAF
Meilleure solution
_laurent a écrit :
Ah oui je le vois aussi ! Pwah véner le truc...


Ouais le truc assez improbable qui semble sortir de nulle part, lol.

Un grand merci pour ta solution ça fonctionne !!!
VSCode n'était pas chaud pour que j'utilise cette propriété (il me la barre) mais dans les faits ça fonctionne très bien. Encore merci !!!
Modifié par Vahia (16 Jun 2022 - 12:24)