PNG : Problème de couleur sous Safari 1.x

Bonjour à tous,
je suis en train de mettre en place un site, et dans ma CSS par défaut j'utilise une combinaison de JPG avec des PNG, en plus de la couleur de fond.

Il y avait bien entendu le problème de rendu de couleurs d'Internet Explorer, résolu grâce à la suppression de la couche gAMA, je teste donc sous plusieurs navigateurs, pas de souci majeur, jusqu'à ce qu'un ami le teste sous Safari 1.2.3 (j'ai la version 2.0), et là il me dit qu'il a ce fameux problème de couleurs, le même genre que celui d'Internet Explorer.

Ca m'a paru très étonnant, j'ai essayé de remettre la couche gAMA, (éventuellement faire un petit !important pour appliquer le PNG sans gAMA à IE seulement), mais le problème est toujours là.

J'ai fait quelques recherches, et je n'ai strictement rien trouvé à ce sujet, j'ai pu trouver quelques personnes qui ont eu le problème, mais elles l'ont résolu en utilisant le GIF, chose que je ne veux absolument pas faire.

J'aimerai donc savoir si quelqu'un a résolu le problème, et si une solution existe.
En dernier recours j'utiliserai le javascript pour remplacer les PNG par des GIF pour Safari 1.x, ou éventuellement un hack CSS pour Safari 1.x (si tant est que ça existe, je ne voudrais pas priver les utilisateurs de la version 2.0 du PNG bien sûr )

Le site est disponible à cette adresse : http://www.ogcreation.com

Merci d'avance pour votre aide, et si Raphael passe par ici, merci pour tout!
Modifié par pierre6020 (02 Jul 2005 - 15:37)

En fait je viens de m'apercevoir qu'il faut également supprimer la couche gAMA pour Safari 2.0, sinon il se comporte comme Internet Explorer.

Je supprime donc la couche gAMA partout, et pas seulement pour Internet Explorer.

Le problème reste entier pour Safari 1.x...
Modifié par pierre6020 (02 Jul 2005 - 15:37)

Etonnant, personne n'a eu le problème?

Je viens d'éditer mes posts, j'avais mis "alpha" en lieu et place de gAMA...

pierre6020 a écrit :
Je viens d'éditer mes posts, j'avais mis "alpha" en lieu et place de gAMA...

Je vois gAMA (pourquoi ces majuscules ) partout moi

Et c'est bien la couche alpha.

Safari 1.x semble se comporter de la même façon qu'IE en ne supportant pas la couche alpha du PNG, donc le mieux est encore de ne pas l'utiliser.
Sous IE aussi ce changement de couleur apparait...

Je peux pas trop t'aider, je suis pas sous MAC

Olivier a écrit :
Je vois gAMA partout moi

Oui, je viens d'indiquer que j'avais édité mes posts.

Olivier a écrit :
(pourquoi ces majuscules )

Olivier a écrit :
Et c'est bien la couche alpha.

Je ne parle pas de transprence ici, il me semble que la couche alpha est la transparence du PNG non?

Olivier a écrit :
Safari 1.x semble se comporter de la même façon qu'IE en ne supportant pas la couche alpha du PNG, donc le mieux est encore de ne pas l'utiliser.

Le PNG? Safari 1.x?

Olivier a écrit :
Sous IE aussi ce changement de couleur apparait...

Quelle version? Sur IE6 Windows, ça fonctionne bien chez moi

Merci pour ton aide
Modifié par pierre6020 (02 Jul 2005 - 16:10)

Ahh j'avais mal lu pour gama alpha ^^

Je connais pas trop ce problème désolé

Salut,

Pour moi toutes tes couleurs sont bonnes, c'est tellement contrasté que je ne vois qu'un fond noir. C'est mieux que l'atelier Mandin où c'est tout noir. J'ai été obligé de sélectionner pour voir ce au tu avais écrit.
Alors, ta couche alpha... je ne l'ai pas vue.

papyjo a écrit :
c'est tellement contrasté que je ne vois qu'un fond noir.

Bonjour,
bizarre, l'arriere plan est posé sur un gris à 39%

Tu es sûr que ce n'est pas un problème de réglage d'écran?

Je remonte une dernière fois le sujet, je pense que je vais devoir passer par du javascript pour afficher un gif sous Safari...

Avec Safari: la transparence des .png est parfaite ( je dirait plutôt la "translucidité" pour différencier d'autres images ayant des parties vides et totalement transparantes ).
dans la css cela s'écrit : background: transparent url("image.png"); le transparent n'est pas obligatoire puisque c'est déja établi par défaut.
Mais les png sont rendus transparants par modification de l'opacité du calque dans un logiciel graphique ( ex : photoshop, illustrator etc... )
Il n'y a pas de bricolage dans la css. Toutes ces histoires "set tranparency" "alpha" et autres propriétés me semblent être destinés pour des couleurs de fond et non des images. D'autre part c'est soit du svg: opacity et stroke-opacity ( qui complète css ?) soit des éléments propriétaires Moz et I_E .
Donc, pour que ce fond gris clair laisse entrevoir ce qu'il y à derrière, il faudrait que tu fasses une image png de quelques pixels à 30% d'opacité. Puis, que tu t'en serves de background. je préviens : ça ne marchera pas sur IE.

Je re-poste ici: Je me suis rappelé d'une question similaire sur
MacBidouille [résolu] il faut indiquer quelque chose comme : opacity:0.5; Il n'est pas utile d'ajouter -moz-opacity car la première fontionne déja. Un petit zip de 8 Ko pour démo
J'aimerais savoir si c'est du css2 ou du svg, ou si il y a une page à part dans les recommandations... J'ai pas trouvé.
Pour filter:alpha(opacity=25); ( grades de 0 à 100 ) C'est une indication I-Explorer, que je n'ai pas reussi à faire marcher.
Modifié par Aureance (04 Jul 2005 - 18:16)

Merci pour cette réponse très complète, mais je n'ai aucun problème avec la transparence du PNG, je ne l'utilise pas du tout sur le site.

Le problème est la façon dont Safari 1.x interprète les couleurs du PNG.

Exemple : Si je mets un div avec un background-color: #cccccc; et que je place une image PNG à côté avec comme unique couleur #cccccc, le PNG sera plus sombre sous Safari 1.x, même si je supprime la ligne gama du PNG, ce qui règle pourtant le problème sous Safari 2.0 et Internet Explorer 6.

Peut être que le logiciel que tu utilises pour fabriquer ces images ou à-plats de couleur.png est mal calibré ? J'utilise souvent des images ayant le même fond que le body, et que ce soit n'importe quel genre d'image, suivant l'outil utilisé ça ne va pas toujours. Illustrator me chauffe un peu les couleurs et monte un peu le contraste à l'enregistrement. Avec Photoshop ou ImageReady c'est impeccable.
Si tu veux pour le test, je peux t'envoyer un petit carré #cccccc.png qui sera parfaitement invisible sur un body#cccccc.
Je ne vois vraiment pas ce que vient faire ta "ligne alpha" ni même ne comprends ce que c'est dans tes réglages ? ( Dans photoshop les couches alpha sont transparentes et dans Flash quand on parle d'alpha, il sagit encore de transparence )

Aureance a écrit :
Je ne vois vraiment pas ce que vient faire ta "ligne alpha" ni même ne comprends ce que c'est dans tes réglages ?

Aureance a écrit :
même si je supprime la ligne gama du PNG

Gama, pas alpha

J'ai l'impression d'avoir du mal à me faire comprendre...

Voici une page qui illustrera mieux ce que j'essaie de dire, avec exemple à l'appui : http://www.antp.be/PNG/tweakpng/

Le problème n'est pas du à mon logiciel d'exportation d'images, puisque le code couleur est toujours identique au background, même après l'exportation.
Pourtant le rendu n'est pas le même dans Internet Explorer ou Safari (1 ou 2).

La suppression de cette ligne des paramètres du PNG (qui doit donner des informations sur la luminosité je pense, ce qui induit en erreur ces navigateurs) résoud le problème sous Internet Explorer, Safari 2.0, mais pas Safari 1.x.

Merci encore pour ton aide

EDIT : Le lien est à ouvrir avec Internet Explorer bien sûr
Modifié par pierre6020 (05 Jul 2005 - 00:10)

Je crois bien qu'on y peut tout simplement rien

Reste Gif et Jpeg

Je crois que je vais finalement devoir m'y résoudre, je viens de m'apercevoir que même les designs d'Alsacreations utilisaient le gif...

Pour rappel, le format GIF est un format propriétaire, contrairement au PNG, qui lui est recommandé par le W3C.

Merci pour votre aide en tout cas!

Plutôt que d'utiliser une image à fond opaque et vouloir rendre ce fond transparent sur Safari en utilisant une correction destinée à I-E... Pourquoi ne pas prendre directement une image bien conçue à la base ? sur fond transparent ? On dirait que ta méthode provoque un cumul des teintes sur Safari. Le bleu de fond ( le toucan de l'exemple ) mesure#6689b0 quand je glisse l'image seule sur Safari et #5276a1 superposé sur le bleu d'accueil. Je tiens à souligner que ce fond mesure la même couleur de base dès qu'on affiche l'image seule ( isolée de son fond ) dans tous navigateurs. Une image de ce type (sans fond png24) s'affichera bien mieux, plus simplement et surtout sans différence notable n'importe ou.

AAAaah!
Je ne cherche pas du tout à rendre cette image transparente, elle est opaque, et doit le rester!

Je cherche simplement à éviter le problème de rendu des couleurs sous Safari.
La transparence ne convient pas, car IE ne gère que deux niveaux de transparence, ce qui crée un fort effet d'escalier.
De plus, je pense que les couleurs seront toujours aussi sombres sous Safari, même si une transparence est appliquée.

Pour le PNG 24bits, essaie d'ouvrir cette même page avec IE, tu verras pourquoi ce n'est pas envisageable non plus

Un grand merci pour ton aide en tout cas, j'ai tout de même écrit un mail à l'auteur de cette page : http://www.antp.be/PNG/tweakpng/

Je pense que s'il ne connait pas la réponse, j'adopterai le Gif, et dans le cas contraire, je vous tiendrai bien sûr informés.

Oui j'ai lu ton exemple qui parle du "mauvais" affichage sous Explorer. mais ta question est de résoudre un problème de couleur sous Safari !
Une capture d'écran avec png opaque ( ou non ) sous Safari et Explorer : Pas de problème d'affichage sur Safari si le png ne passe pas par ta moulinette Tweakpng.

Avec le colorimètre numérique, on se rend tout de suite compte qu'il y a une différence.

Je crois qu'après ça... Tu vas pouvoir poser la question suivante : Quand je bidouille une image pour qu'elle passe bien sur Explorer ( puisque ça marche ) pourquoi Safari n'affiche plus correctement ?

Une question : tu es sur quelle version de Safari?

Parce que justement, au départ j'avais fait une image pour Internet Explorer avec la bidouille, et l'image sans bidouille pour les autres (via le hack !important).

Ca passait donc très bien sur Safari 2.0 et Internet Explorer 6 Windows.

C'est à ce moment-là que l'on m'a averti que ça ne passait pas sous Safari 1.2.3.

J'ai donc mis l'image "bidouillée" pour tout le monde, et là, après quelques actualisations/vidages de cache, on s'est aperçu que ça ne fonctionnait toujours pas.