Problème de rafraichissement du logo de mon header

Français Discussions Questions et réponses sur des sujets techniques
,

Topic summary

Problème central: le logo du header s’affiche en ■■■■■■ à chaque changement/rafraîchissement de page, provoquant un décalage des autres éléments. Les tentatives (image légère, préchargement, plugins) n’ont pas résolu le bug, apparu ultérieurement.

Diagnostic: le logo est chargé/caché par une règle CSS dans base.css qui applique display:none aux div:empty (éléments sans contenu). Une balise en fin de body réactive ensuite l’affichage des div vides, ce qui override la règle initiale et affiche le logo plus tard. Un enregistrement GIF illustre le comportement.

Explication technique: div:empty est une pseudo-classe CSS ciblant les balises sans nœuds enfants; display:none masque l’élément jusqu’à ce qu’une règle ultérieure le réaffiche.

Suggestions:

  • Ne pas afficher les div vides (conforme au thème Dawn).
  • Ajouter un espace dans la div contenant le logo pour qu’elle ne soit pas considérée vide et éviter le masquage initial.

Support: demander la liste des applications utilisées et, en cas de modifications de code, revenir à une version précédente du thème via le guide officiel.

Statut: aucune confirmation de correction; discussion ouverte.

Summarized with AI on December 28. AI used: gpt-5.
1

Bonjour,

J’ai actuellement un problème sur un site dont je m’occupe pour une tierce personne.

le site : https://editions-animees.com/

Celui-ci a été codé from scratch à partir d’un thème dawn shopify.

En effet, à chaque changement de page ou rafraichissement de la page actuelle, le logo de mon header se rafraichis plus lentement que les autres éléments de mon header. Ce qui à pour conséquence de faire bouger les autres items le temps que le logo apparaisse.

Je ne trouve pas de solution à propos de cela, l’image ne fais que quelques kbits, même avec un pre-load ça ne change rien, j’ai installé des plugin, mais le problème n’est apparu que bien après ces installations…

Quelqu’un aurait-il une idée d’où pourrait provenir ce genre de bug ?

Merci d’avance

2

Bonjour,

Le logo est bien chargé (ou mis en cache par le navigateur), mais la feuille de style base.css le cache (display:none) car la div qui contient le logo est vide (div:empty), ce recording illustre le problème : https://i.vgy.me/vJj4bj.gif.

Ensuite il y a une balise de style vers la fin du body qui indique d’afficher les div vides, ce qui override la première règle et affiche le logo bien plus tard. Je déconseille d’afficher les div vides puisque le thème Dawn prévoit de les cacher par défaut, il vaudrait mieux dans ce cas ajouter un espace dans la div qui contient le logo :
3

Bonjour @AnomalieDesign !

Pourriez-vous me préciser les applications que vous utilisez, et si vous avez modifié le code de votre boutique récemment ?

Dans le cas où vous auriez modifié votre code, je vous inviterais à suivre les instructions contenues dans notre guide complet pour retourner à la version précédente du code de votre thème.

Je reste disponible en cas de besoin !