Incompatibilité Safari/Chrome Webkit/Childtheme Wordpress Extra

[Résolu/Fermé]
Signaler
Messages postés
68
Date d'inscription
dimanche 16 mars 2014
Statut
Membre
Dernière intervention
24 janvier 2017
-
Messages postés
68
Date d'inscription
dimanche 16 mars 2014
Statut
Membre
Dernière intervention
24 janvier 2017
-
Bonjour camarades,

J'ai modifié un template Wordpress, mais je n'arrive pas à obtenir le même résultat sur Safari que sur les autres navigateurs. (D'ailleurs il y a des différences d'affichage avec Safari (mis à jour) selon l'OS (Mac/Windows) apparemment, chose que j'essayerais de vérifier par la suite avec une VM.

Le problème, dans un premier temps concerne mon menu, qui sur Safari s'affiche verticalement alors que sur chrome s'affiche normalement, donc horizontalement.

Voici les modifications apportés dans mon thème enfant,
#eti-navigation > ul {
    justify-content: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#eti-navigation > ul > li {
    display: inline;
    text-transform: uppercase;
    margin: 0 15px;
}

#eti-navigation > ul > li > a {
    position: relative;
    background-color:white;
    display: block;
    border: 0;
    padding: 0 0 0 0px;
}


Bon, je ne saisis pas grand chose aux web-kit, alors en bidouillant un peu grâce a (https://gist.github.com/cimmanon/727c9d558b374d27c5b6 pour rendre mon menu compatible aux justify-content j'ai rajouté les éléments suivants :


#eti-navigation > ul {
    justify-content: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap

    display: -webkit-box;
    -webkit-box-pack: center; 
}


Incroyable ça marche, le menu s'aligne normalement sur Safari, mais c'est maintenant sur Chrome (et uniquement sur Chrome) que mon menu s'aligne verticalement (avec exactement le même problème antécédent de Safari).

Le deuxième problème concerne le aside de mon site qui ne s'affiche pas à côté de mon main-content sur Safari. Mais là il s'agit probablement d'un problème du thème Extra de Elegant-thème sachant que j'ai se problème sur le thème parent également.

Si vous inspectez le site : http://mytrainingdiary.fr/ vous remarquerez peut être que j'ai fais quelques trucs pas vraiment préconisés avec le menu, Le css du menu au scroll down est différent du menu fixe ( j'ai du dupliquer son conteneur). Et j'ai rajouté quelques styles en dur dans le html parce que le thème était pour moi plutôt complexe dans la compréhension.

Mais là le problème est ailleurs, tous les navigateurs affichent le menu correctement mis à part Safari alors si vous avez une solution concernant le conflit qui se passe dans mes webkit, je suis preneur :)

En vous remerciant par avance pour votre aide !

1 réponse

Messages postés
2581
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
18 octobre 2021
464
Salut,

La version pour Windows de Safari semble abandonnée et n'est plus mise à jour depuis mai 2012, ce qui explique surement les problèmes d'affichages.
https://en.wikipedia.org/wiki/Safari_version_history

A mon avis tu ne devrais pas te soucier des problèmes d'affichages de Safari pour Windows sur lequel les standards web ne sont plus implémentés et qui n'est quasiment plus utilisé : https://www.w3schools.com/browsers/browsers_safari.asp

Bonne journée,
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41713 internautes nous ont dit merci ce mois-ci

Messages postés
68
Date d'inscription
dimanche 16 mars 2014
Statut
Membre
Dernière intervention
24 janvier 2017

D'accord, merci beaucoup pour cette réponse camarade. J'avais aussi un autre problème d'affichage sur Safari de MacOS mais je les ai résolu en enlevant une <div class> généré par le thème parent.