Forums Développement Multimédia

Aller au contenu

degradé css background de mauvaise qualité sur mac

css gradient

5 réponses à ce sujet

#1 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7060 messages

Posté 11 February 2017 - 22:37 PM

bonjour

je viens vers vous avec un problème de dégradé qui a un mauvais rendu sur mac

je fais un div tout bete, et je lui met un gradient radial en background

sur windows, le dégradé apparait correctement
sur mac os le dégradé n'apparait pas correctement. On vois les étapes de transition (un peu comme s'il n'arrivait pas à faire toutes les nuances du dégradé)

je joins une image ou j'ai volontairement accentué les etapes, c'est juste pour voir de quoi je parle

une url pour voir le probleme
http://stylmeuble.fr.../test/test.html


et voici le code de test


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Document sans nom</title>
        <style type="text/css">
        .plop {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #464646;
                background: -moz-radial-gradient(center, ellipse cover, #464646 0%, #212121 100%);
                background: -webkit-radial-gradient(center, ellipse cover, #464646 0%, #212121 100%);
                background: radial-gradient(ellipse at center, #464646 0%, #212121 100%);
        }
        </style>
</head>
<body>
        <div class="plop"></div>
</body>
</html>
 

merci d'avance

a+

Fichier(s) joint(s)

  • Fichier joint  degrade.jpg   58.45 Ko   4 téléchargement(s)


#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6952 messages

Posté 11 February 2017 - 22:42 PM

Hello,

Sur quel navigateur ?
Je penche plus pour un problème de navigateur que d'OS.
Peut-être utile : https://developer.ap...s/Gradient.html

#3 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7060 messages

Posté 11 February 2017 - 22:48 PM

salut Monsieur Spi cela fait longtemps

sur n'importe quel navigateur sur mac (chrome, firefox, safari)
j'ai aussi constater le même problème sur chrome android

j'ai aussi testé mon dégradé sur ce site
http://www.colorzill...radient-editor/

le résultat est tout aussi dégradé sur mac

c'est comme s'il avait du mal lorsque que les couleurs de départ et d'arriver sont trop proche

ps: j'ai rajouté un lien dans mon premier post, pour pouvoir tester le truc
http://stylmeuble.fr.../test/test.html

a+

#4 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6952 messages

Posté 11 February 2017 - 23:09 PM

Re,

Yep un bail ;)

Je viens de tester et je constate le même problème, et je ne suis pas sur Mac.
C'est flagrant en faisant varier les couleurs via la console du navigateur, un test du genre :

background: radial-gradient(ellipse at center, #262626, #212121);
Plus les couleurs sont proches et plus les bandes sont visibles.
Intéressant, je vais me renseigner :)

#5 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7060 messages

Posté 14 February 2017 - 02:21 AM

salut

j'ai un peu avancé
je me suis dis que j'allais tenté de contourné le truc avec un svg, j'ai donc fait le dégradé dans illustrtator, et la le même problème apparait.
J'ai fait le test dans photoshop et la le problème n'apparait pas.

idée:

si je devais programmer un outil qui créé un dégradé, je ferais une interpolation de la couleur 1 vers la couleur 2
couleur 1 = #333333
couleur 2 = #353535
donc si on fait l'interpolation bête et méchante on obtient bien une seul couleur intermédiaire #343434

maintenant si on regarde le dégradé créé par photoshop on voit qu'il ne fait pas du tout cela il passe par d'autre étape
dans le désordre #33334 #343433..
visuellement le dégradé apparait bien, par contre on voit bien qu'il passe par des couleurs qui ne sont plus des gris
Je me demande si photoshop n'utilise pas un autre espace colorimétrique pour faire sont calcul, mais je n'es pas trouvé lequel

a+

#6 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6952 messages

Posté 18 February 2017 - 13:27 PM

Yop,

J'ai aussi pensé au SVG, puis au Canvas, as-tu essayé en JS dans un Canvas ?
J'ai un peu cherché, le problème est assez répandu (voir "gradient banding" pour Photoshop et "gradient banding css" pour les navigateurs).
Pour le moment pas de solution réellement fonctionnelle, je n'ai pas encore testé avec un Canvas, et le problème semble plus répandu sur Chrome.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP