28172 sujets

CSS et mise en forme, CSS3

Problème d'affichage sur les appareils Apple (prob. avec Web-kit?)

Bonjour tout le monde,

Je développe par moi même mon site web (parce que je suis liiiiiiibre et que ça me fait kiffer) qui me fait office de porte folio "in line". J'utilise uniquement HTML, CSS et PHP. Mon site fonctionne bien partout... sauf sur sur les machines Apple (Mac, Macbook etc...) et bien sure la majorité de mon publique doit voire mon site sur ce genre de machine... Malheureusement je ne possède pas de mac pour développer.

Les problèmes d'affichages se caractérisent par une absence ou un empilement des éléments (liens / txt).

Je ne pense pas utiliser de fonction HTML5 ou CSS3 expérimentale et qui peuvent être problématiques (et qui demandes des préfixes). Je suppose que mes problèmes viennent du CSS et de Web-kit mais malgré de nombreuses recherches je ne trouve pas, je me tourne donc vers vous.

l'adresse du site : thomas-sable.fr
l'emplacement du CSS : thomas-sable.fr/css/style_principale.css
Les images du test avec bowsershots.org : http://browsershots.org/http://thomas-sable.fr/
si indisponible : https://drive.google.com/drive/folders/11RFYarqnSplHY2YwSlyaQ4bzVUFtashN?usp=sharing

Bien à vous.

BT.
Modérateur
Bonjour,

Etonnant ! Une vraie performance que d'arriver à faire marche un site sous chrome et firefox sur windows (et même ie11 et edge), et que le même code ne fonctionne ni sous chrome, ni sous firefox, ni sous safari sur MacOS.

A priori, le principal problème semble venir des z-index. Ils sont tous inutiles à première vue, et perturbent beaucoup l'affichage.

Il y a sans doute ensuite d'autres problèmes (secondaires), mais déjà supprime ces z-index, vérifie que ça marche toujours comme attendu sous windows, et je re-testerai sur Mac OS.

Amicalement,
Modifié par parsimonhi (12 Jan 2019 - 12:38)
Salut parsimonhi,

Merci pour ton aide.

Pas si étonnant : respect des normes HTML et CSS, pas d'utilisation d'autres langages et pas de truc trop complexe et chiadé et ça marche... sauf chez Apple (Ils respectent les normes ? Smiley cligne ) et une petite vérif. chez W3C.

Bon j'ai viré les z-index... à voir si ça change qq chose sur un Mac.

A+

BT
Modérateur
Bonjour,

Pour les z-index, ce n'est pas une question de norme : tu faisais n'importe quoi.

Bon, j'ai trouvé d'autres problèmes :

1) La police gotham

- Déjà, tu changes son nom en gothame : ça marche à peu près partout, mais faut se méfier. As-tu une bonne raison de changer de nom ?
- Peut-être que tu as modifié son fichier ? En tout cas, elle ne marche pas (sauf peut-être avec firefox). C'est elle qui semble produire les affichages bizarres dans tes tests sur http://browsershots.org.

EDIT (après quelques tests supplémentaires) :
- avec firefox, ça semble afficher la police, mais on ne peut plus cliquer sur les liens qui sont écrits avec cette police,
- avec chrome, ça affiche les textes avec un line-height de 0 (et on a sans doute aussi le même problème de clic qu'avec firefox),
- avec safari, ça n'affiche pas du tout les textes écrits avec cette police.

2) Les positions fixed sur les gros containers
Ça me supprime les scrollbars sur ces conteneurs (normal puisqu'on peut pas les bouger). Du coup, si ton contenu est plus grand que ma fenêtre, je ne peux pas y accéder.

D'une manière générale, le position:fixed est délicat à utiliser.

De plus, il n'est pas garanti, quand on utilise cette propriété, qu'on ait le rendu attendu sur mobile.

Il faut vraiment bien maitriser pour utiliser cette propriété.

Amicalement,
Modifié par parsimonhi (12 Jan 2019 - 15:45)
Meilleure solution
J'ai apporté les correctifs en fonction de tes remarques.

J'utilise la police GothamLight.ttf qui n'est pas standard et donc je la rend dispo depuis le server avec :

@font-face
{
  font-family: 'GothamLight';
  src: url(../typo/GothamLight.ttf);
}


Mais il me semblais que l'on pouvais mettre n'importe quelle nom à la place dans font-family.
Et la typo marche chez moi quoi que je décide de mettre comme nom de remplacement sur les principaux navigateurs.

A+
Modérateur
Bonjour,

Oui, j'avais vu comment tu avais fait.

Changer de nom est possible mais déconseillé.

Mais ce n'est pas le problème principal. La police se charge bien, mais corrompt l'affichage des textes.

Si j'affiche ton site, que je lance un inspecteur du contenu, et que je supprime gothame dans la liste des polices indiquées dans le font-family de body, les problèmes dus à la police disparaissent.

Il reste d'autres problèmes, mais à première vue, ils ne sont pas trop bloquants (sauf le position:fixed que j'ai déjà signalé).

Amicalement,
Modifié par parsimonhi (12 Jan 2019 - 16:02)
Quel serait donc la solution ?
Utiliser des feuilles de styles alternatives?
Ou ne pas se servir de cette typo (ça me dérange un peut...)?
Modérateur
Bonjour,

Il faudrait déjà être sûr de ton fichier ttf : il contient des erreurs selon moi. Y a des outils pour vérifier ça, mais je ne suis pas un expert dans ce domaine-là.

Amicalement,
Bon en attendant de trouver comment valider mon .tff (qui n'est pas de ma fabrication) j'ai passé mon site en Arial bien standard.
Modérateur
Bonjour,

Je viens de "vérifier" ta police en l'installant via l'application "Livre des polices" de Mac-OS.

Ça me répond qu'il n'y a pas d'erreur, mais le "line-height" de la police semble être à 0 (pas une erreur de format donc, mais un rendu inattendu).

J'ai essayé avec un fichier otf que j'avais au lieu de ttf. Résultats ok pour chrome, firefox et safari sur Mac OS. Mais bon, un fichier ttf serait mieux.

Il te faut donc trouver un autre fichier ttf "qui marche".

Amicalement,
Modérateur
Bonjour,

Je viens de tester superficiellement ton site après ta modif en arial. Ça a l'air ok sur les 3 navigateurs sur Mac OS.

Reste sans doute d'autres détails à régler, mais mineurs.

Amicalement,
Modérateur
Bonjour,

Juste pour information, je viens de convertir mon fichier otf en ttf en utilisant un convertisseur de format en ligne qui s'appelle convertio.

Résultat nickel pour gotham en ttf sur mes 3 navigateurs Mac OS.

Amicalement,
Sujet clos
Aller à