Petit bug sous Chrome

Bonjour,

à l'ouverture d'un site, une animation js à base de :

$(document).ready(function() {
   $('.single-section').hover(function(){
           $(this).toggleClass('hover-in'),
            $(this).toggleClass('hover-off'),
            $('.single-section').toggleClass('hover-off')
       }
    )
    });

A tendance a bugguer en mettant un hover-in fixe sur un bloc... Et ça pose de gros soucis. Ça le fait uniquement à la première ouverture avec caches vidés du navigateur Chromo (dernière version).
J'ai bien d'autres scripts mais je ne vois pas en quoi ça créerait un bug à l'ouverture seulement (ça serait tout le temps).

Voici le site

Merci pour vos retours sur ce petit bug gênant.
Modifié par letty (27 Feb 2018 - 18:17)

Puis-je remonter ? Il y avait une petite erreur textuelle corrigée et je suis toujours bloquée.

Salut,

Je n'ai peut etre pas super bien compris ce que ca devait faire, ou et quand mais je ne vois pas de soucis ni de classe hover-in présentes avant que je fasse un hover...

Le bug est aléatoire... Du coup ça vous l'a sûrement pas fait. En fait, je voudrais savoir si mon code js est bon ou s'il peut être sujet à petit bug.

mmmmmm dans la fonction il faut des points virgules à la fin des lignes et pas des virgules... non ?

 $('.single-section').hover(function(){
           $(this).toggleClass('hover-in');
            $(this).toggleClass('hover-off');
            $('.single-section').toggleClass('hover-off');
}

Non ça ne change rien. Le bug se produit sous chrome lorsqu'on laisse la souris au survol des éléments... Je pense que ça doit créer une sorte de conflit au chargement. Mais comment contourner ça ? Je pensais que mon $(document).ready(function() suffisait à dire de ne pas jouer l'animation avant que tout soit chargé.

Salut,

Et pourquoi tu passes par Javascript pour faire ça au fait ?

Et plus globalement tu devrais optimiser ta manière de faire, sur FF ce n'est pas très fluide.

Je vois pas trop comment faire ça en css... Comment expliquer avec une même classe css que quand un élément est hover, les autres ont un autre comportement ? Si vous avez la réponse je suis très intéressée

Ca peut se faire avec du flex.
https://jsfiddle.net/Undless/fLp8L0qr/5/

Ah ouiiii ! J'y avais pas pensé. Je suis tombée là-dessus : https://www.cssscript.com/pure-css-responsive-horizontal-accordion/

Du coup, pour les compatibilité tout navigateur Flex ou je pars sur l'usine à gaz ul li ?

Merci en tout cas pour votre aide, grâce à vous ça va être bien mieux

Ce n'est pas une usine à gaz d'utiliser des ul li, c'est juste une question de sémantique. Et tu peux le faire avec display:table au lieu de flexbox pour un max de rétro compatibilité.