Chrom radial css gradient Glätte

Im mit chrome 18.0.1025.162 und versuche, einen radialen Farbverlauf

-webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.9))

Das problem ist, dass der Farbverlauf ist sehr pixelig irgendwie, den übergang in die Farb-und alpha ist in Blöcken und nicht glatt. Anders ist dies bei Safari und Firefox. Safari & Firefox tut es sehr ruhig und gut

Ist das ein Fehler bei chrome? Jemand das gleiche problem mit diesem. Ein einfacher Farbverlauf!! Sicherlich etwas so einfaches wie das nicht ein glitch

Check out : http://jsfiddle.net/GyRLe/1/ für eine demo von dem, was ich meine.

Gibt es eine Lösung für dieses? Ein Bild wäre schrecklich 🙁

(Ok, so zu sehen, wie schlecht die Laufruhe ist):
Dies ist, was ich bekomme, wenn ich es zu benutzen:
http://i.imgur.com/UYB1d.png (Chrom)

http://i.imgur.com/tzGuq.png (Safari) (Scheint ein bisschen kantig, aber das ist, weil die png-Datei, da sonst Ihre Nähe, um perfekte Glätte)

Firefox ist genauso gut wie Safari, seine nur chrome macht es schlecht
Ich brauche alpha, weil Im putting wiederholen-Stil Bild im hintergrund

Edit: Chrome 20 (Kanaren) auch hatte diese schreckliche Problem!

Edit2: Der Grund, warum wir den Einsatz von CSS ist, so dass wir dont haben, Bilder zu verwenden! Also ich habe dies nur Hinzugefügt, um http://code.google.com/p/chromium/issues/detail?id=123491 & hoffentlich google bekommt Ihre Tat gerade weil ich denke, dass chrome ist wunderbar

  • NÖ! Es gibt keine Lösung. Du musst um ein Bild zu verwenden.
  • Es sieht sehr glatt zu mir: i.stack.imgur.com/sal39.png (Chrome 18.0.1025.142 (Ubuntu 11.10)).
  • Vergleichen Sie mit safari (mein Beispiel ist nicht sehr gut aber mit einem meiner Konfigurationen (mit einem Bild als hintergrund) kommt es schrecklich)
  • Das ist nicht glatt btw (zum Vergleich) i.imgur.com/3SYXW.png
InformationsquelleAutor Akshat | 2012-04-14
  1. 1

    Ich weiß, dass Sie es geschrieben haben, ziemlich lange her, aber ich hatte das gleiche Problem (starke Streifenbildung), die mit Chrome 24 :

    -webkit-radial-gradient(center, ellipse cover,  #XXXXXX 0%,#YYYYYY 100%);

    Aber ich erkannte, dass mit dem nachstehenden code in das banding fast verschwunden :

    -webkit-gradient(radial, center, 0px, center, 100%, color-stop(0%,#XXXXXX), color-stop(100%,#YYYYYY));

    Hoffe, das hilft.

    Edit:, die ich gesehen habe, dass die -webkit-gradient(radial, ...) ist einfach nur die alte syntax für den radialen Farbverlauf angezeigt, so sollte es nicht sein, eine langfristige Antwort für das Thema...

    • Welp. Diese Antwort ist nicht mehr geeignet. 🙁
    InformationsquelleAutor Florent Vielfaure
  2. 3

    Wenn Sie nicht brauchen, wird der alpha-Wert, es sieht viel glatter, mit rgb statt rgba.

    Demo: http://jsfiddle.net/tKtV9/

    • Es gibt absolut keine änderung bei der Transparenz Hinzugefügt. Senken Sie die Farbbereich - z.B. weiß auf Grau Farbverlauf und sehen Sie die bands
    InformationsquelleAutor stewe
  3. 0

    Es hilft nicht viel in diesem Fall, aber ich habe bemerkt, dass das hinzufügen

    width: x-value;
height: y-value;

    manchmal helfen kann. X-Wert und Y-Wert, natürlich, wenn Sie Ihre Dimensionen.

    • Wo hast du es hinzufügen? Ich verwende bereits die Höhe und Breite (wie in der jsfiddle - ich warf es in das div statt der css)
    • Ja, so wie Sie es Taten. Aber wenn Sie den Verlauf in das html-oder body, zum Beispiel, habe ich bemerkt, Einstellung Breite/Höhe sorgt für eine reibungslose Verlauf.
    InformationsquelleAutor Connor
Schreibe einen Kommentar