Problème de compatibilité de navigateur

Bonjour à tous
J'ai découvert que la bannière des pages du site http://tests.osirisnet.net a une mauvaise présentation sur le navigateur Safari sur Windows: les deux "images texte" qui se trouvent dans la bannière sont cadrés à droite

au lieu d'être centrées comme sur les autres navigateurs.

y compris Safari sur iPhone
Je ne me préoccupe pas tellement de Safari sur Windows, qui ne doit guère être utilisé, mais je suis inquiet de ce qui peut causer ce phénomène anormal, et je me demande ce qui se passe pour Safari sur Mac, dont je ne dispose pas personnellement.
Merci pour votre aide

Salut,

Et bah jetons un coup d’œil à Caniuse !
http://caniuse.com/#feat=transforms2d
Très bien supporté par Safari récent et supporté par les anciens avec un préfix -webkit- (je n'en vois pas dans ton code du coup je ne sais pas s'il n'y est pas ou si tu ne l'a juste pas mis).

Mais +1 pour Greg tester la compat Safari avec le Safari Windows c'est comme tester des pneus de F1 avec une 4L

Bien d'accord avec vous, Safari pour Windows est sans intérêt.
Ce qui s'est passé:
J'ai reçu cette image hier soir, sans info sur le navigateur utilisé, (j'ai demandé à mon correspondant, mais il ne m'a pas encore répondu). Je pense que c'est une photo d'écran, pas une capture, donc ça ne vient peut être pas directement de lui

J'ai regardé ce qui se passait sur tous les navigateurs dont je dispose, ça a l'air de fonctionner correctement.
J'ai retrouvé Safari pour Windows, qui traine sur mon PC depuis pas mal de temps, et j'ai trouvé ce bug, qui n'est du reste pas exactement la même chose que ce que m'indique mon correspondant.
Modifié par PapyJP (15 May 2017 - 11:52)

D'après la photo c'est un Ipad je dirais. Et c'est peut être un vieil IPad donc tente avec le préfixe comme je te l'ai suggéré juste avant (et ça devrait aussi marcher sur ton Safari Windows).

_laurent a écrit :
D'après la photo c'est un Ipad je dirais. Et c'est peut être un vieil IPad donc tente avec le préfixe comme je te l'ai suggéré juste avant (et ça devrait aussi marcher sur ton Safari Windows).

Merci de ta réponse.
Je n'ai jamais utilisé les préfixes... je ne sais même pas comment ça s'utilise, et dans lesquelles de la centaine de commandes CSS il faudrait que le le mette..
Help!

C'est pas très compliqué tu vas bien t'en sortir.
https://developer.mozilla.org/fr/docs/Glossaire/Pr%C3%A9fixe_Vendeur

#ribbonTitle {
     -webkit-transform:translateX(-50%);
     transform:translateX(-50%);
}

Par contre pour les rajouter partout ça dans un code existant ça devient un peu plus complexe. Perso ils sont rajouté au moment de la génération du code par un préprocesseur mais si tu n'en a pas tu pourrais peut être partir sur une solution comme ça (je ne m'en porte pas garant, je n'ai jamais tenté et l'article date de 2011...) : https://www.alsacreations.com/article/lire/1306-prefix-free-prefixes-CSS3.html

Après pour savoir lesquels utiliser... et bien il faut partir des versions de navigateurs que tu veux supporter et regarder le CSS utilisé pour voir s'il y a besoin de préfixer...

Et sinon tu les rajoute à la main quand tu vois qu'il y a un bug comme celui là (et t'en profite pour faire un ctrl+F sur les transform de ton CSS)

bon courage !

_laurent a écrit :
C'est pas très compliqué tu vas bien t'en sortir.
..........................................
bon courage !

C'est bien ce que je pensais!
Pas envie de me lancer là dedans pour supporter des navigateurs obsolètes.
Compte tenu de mon audience, il est plus important pour moi de supporter les vieilles versions de IE (et Dieu sait si ça m'a provoqué des migraines!) autant les vieux iPads...
Actuellement le site n'est pas supporté par les mobiles, il est plein de tables imbriquées, avec des tailles en pixels, bref, je me fiche que la version actuellement en tests et qui devrait être rendue publique ce mois-ci soir compatible avec des vieux iPads!

Yordi a écrit :

Drôle de réponse

J'explicite:
il s'agit de faire une nouvelle version du site http://www.osirisnet.net
Sa techno a été faite à base de copier/coller au début des années 2000.
Ce site est très apprécié par des égyptologues dans le monde entier, plusieurs milliers de personnes qui ne doivent en aucun cas ne pas pouvoir retrouver leurs petits.
Beaucoup de ces personnes utilisent encore de vieilles versions de IE. Nous allons bien entendu leur envoyer des messages -- du moins pour ceux qui sont abonnés à la Newsletter -- et les inciter à passer à des versions nouvelles. Ceux qui utilisent un vieil iPad sont moins nombreux, d'après Google Analytics, que ceux qui utilisent de vieilles versions de IE.
J'ai néanmoins modifié le CSS des deux "images de texte" en question, selon les recommandations de _laurent. C'était en effet très gênant que la première chose que l'on voit quand on se connecte depuis un vieil iPad soit une bannière mal présentée, mais je n'ai pas l'intention d'aller au delà.
Voici les modifications apportée au CSS:

#ribbonTitle {
	left:50%;
	width:30%;
	top:2%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}
#ribbonSubtitle {
	left:50%;
	width:50%;
	bottom:2%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}