Firefox vs. Webkit: unterschiedliche Gradient-Interpretationen!

icecream · #1 (**permalink**) 10.01.2012, 16:24

Liebes xhtmlforum,

ich arbeite zur Zeit an der Umsetzung eines Design, das ich in Adobe Fireworks 5.1 entworfen habe.

Zum ersten mal setze ich dabei auf fast ausschließlich CSS3, um Farbverläufe und Schatten darzustellen. Um die Farbverläufe aus meinem Fireworks-Entwurf zu exportieren, habe ich das geniale Tool namens "CSS Properties / CSS3 Mobile" verwendet.

Ich war begeistert, wie gut es funktioniert, denn im Firefox werden die Verläufe fast exakt so dargestellt, wie im Fireworks-Entwurf:

Fireworks-Entwurf: http://six-strings.de/v2/entwurf.jpg
HTML-Umsetzung: Home ? six strings

Öffne ich dieselbe Seite allerdings in einem Webkit-Browser (Safari/Chrome), werden die Verläufe komplett falsch dargestellt.

So generiere ich bspw. den grauen Button ("Erstmal im Blog stöbern!") mit CSS. Die Verläufe werden mir dabei vom obengenannten Plugin für Fireworks ausgespuckt:

Code:

.buttonblue, .buttonred, .buttongrey {
	height: 25px;
	line-height: normal;
	width: 175px;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	padding-top: 10px;
	background-color:#efefef;
	/* Firefox v1.0+ */
	-moz-border-radius:18px ;
	/* Safari v3.0+ and by Chrome v0.2+ */
	-webkit-border-radius:18px ;
	/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
	border-radius:18px;
	position: relative;
	/* Firefox v3.5+ */
	-moz-text-shadow:0px -1px 0px rgb(0,0,0);
	/* Safari v3.0+ and by Chrome v0.2+ */
	-webkit-text-shadow:0px -1px 0px rgb(0,0,0);
	/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+  and by Opera v10.5+ */
	text-shadow:0px -1px 0px rgb(0,0,0);
	
	zoom:1;
	
	filter:
		progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #ff000000,Positive = true);
	
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #ff000000,Positive = true)";
}

.buttongrey {
	/* Firefox v3.6+ */
	background-image:
	-moz-linear-gradient(49% -213% -90deg,
	rgb(239,239,239) 0%,
	rgb(102,108,115) 100%); 
	
	/* safari v4.0+ and by Chrome v3.0+ */
	background-image:
	-webkit-gradient(linear,
	49% -213%,
	49% 97%,
	color-stop(0, rgb(239,239,239)),
	color-stop(1, rgb(102,108,115)));
	
	/* Chrome v10.0+ and by safari nightly build*/
	background-image:
	-webkit-linear-gradient(-90deg,
	rgb(239,239,239) 0%,
	rgb(102,108,115) 100%);
	
	/* Opera v11.10+ */
	background-image:
	-o-linear-gradient(-90deg,
	rgb(239,239,239) 0%,
	rgb(102,108,115) 100%);
	
	background-image:
	linear-gradient(-90deg,
	rgb(239,239,239) 0%,
	rgb(102,108,115) 100%);
	
	
	
	filter:
		progid:DXImageTransform.Microsoft.gradient(startColorstr = #ffefefef,endColorstr = #ff666c73,GradientType = 0);
	
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #ffefefef,endColorstr = #ff666c73,GradientType = 0)";
}

Hat jemand eine Ahnung, wie es zu diesen enorm unterschiedlichen Interpretationen kommt? Ist der Code falsch, habe ich etwas vergessen?

Ich freue mich über jede Antwort. Vielen Dank im Voraus!

Liebe Grüße

Macks

fricca · #2 (**permalink**) 10.01.2012, 16:33

Für aktuelle Webkit-Browser gelten die zweiten -webkit-Verlaufs-Angaben (Da steht was von "Nightly Build", das stimmt nicht mehr).
Wenn man diese Syntax mit der für Firefox vergleicht, fällt auf, dass Werte fehlen. Das dürfte wohl die unterschiedliche Darstellung hervorrufen.
Leider erklärst du nicht, was du mit "komplett falsch" meinst. Und die Angabe der Browser-Version wäre ebenfalls hilfreich.
Ob für alte Webkit-Versionen mit der alten Verlauf-Syntax dein Wunschverlauf möglich ist, weiß ich nicht. Ich würde im Zweifel für diese Browser auf den Verlauf verzichten.

icecream · #3 (**permalink**) 10.01.2012, 17:06

Hi Corina,

vielen Dank für die schnelle Antwort!

Ich verwende die jeweils aktuellen Versionen der beiden Browser für Mac. Wenn ich den Verlaufscode für die aktuellen Browser bei "[…] Nightly Build […]" einfüge, wird der Verlauf richtig dargestellt, danke.

Sollte ich deiner Einschätzung nach den kompletten Nightly-Absatz rausnehmen oder einfach den Code mit dem der modernen Browser (wie eben beschrieben) ersetzen?

Liebe Grüße

Macks

fricca · #4 (**permalink**) 10.01.2012, 17:40

Ich habe gerade nochmal einen genaueren Blick auf diese Verläufe geworfen. Diese Syntax irritiert mich, ich frage mich gerade, ob die so gültig ist (oder es jemals war).
Da steht:

Zitat:

Code:

    -moz-linear-gradient(49% -213% -90deg,
     rgb(239,239,239) 0%,
     rgb(102,108,115) 100%);

Wenn ich das richtig sehe, sollte das folgendem entsprechen:

Code:

    -moz-linear-gradient(
     rgb(239,239,239) -213%,
     rgb(102,108,115));

(Identisch für die anderen Prefixe; -ms- würde ich auch dazunehmen. IE10 freut sich.)
Überflüssige Angaben sind weggelassen (von oben nach unten ist initial).
Ich weiß nicht, auf welche Fassung der Spec sich dein Generator stützt. Die aktuelle ist es aber nicht. Von daher wäre meine Empfehlung: Die Gradients selber schreiben.
Derzeit ist noch das Problem, dass die Spec und die Implementierungen voneinander abweichen (Verlaufsrichtung). Deshalb würde ich auf die Gradzahl verzichten, wenn es sowieso der Initialwert ist. Der ändert sich hoffentlich nicht mehr.

Zitat:

Zitat von icecream

Sollte ich deiner Einschätzung nach den kompletten Nightly-Absatz rausnehmen oder einfach den Code mit dem der modernen Browser (wie eben beschrieben) ersetzen?

Nein, nein, nicht rausnehmen. Das ist doch das, was aktuell ist. Nicht aktuell ist der Kommentar, der behauptet, das gelte nur für Safari nightly build. Safari 5.1 unterstützt die aktuelle Syntax.

Wenn du etwas weglassen willst, dann die alte Webkit-Syntax. Ich persönlich habe keine Lust, die auch noch zu pflegen. Außerdem würde ich die Filter weglassen.
Wie bei vielem in CSS3 muss man zukünftig ein Auge darauf haben, ob und was sich noch ändert. Gradients sind diesbezüglich eher heikel.

Thielo · #5 (**permalink**) 10.01.2012, 17:48

Hier ein kleiner Link der aktuell bei mir in allen Browsern (IE ausgenommen) das macht was ich will: Ultimate CSS Gradient Generator - ColorZilla.com

fricca · #6 (**permalink**) 10.01.2012, 17:55

Auch bei diesem Generator entspricht die allgemeine Syntax nicht dem derzeitigen Stand der Spezifikation.
Das Problem dabei ist, dass man das heute noch in keinem Browser sehen kann.

icecream · #7 (**permalink**) 10.01.2012, 18:07

Vielen Dank für eure Antworten.

Den ColorZilla-Generator habe ich auch schon benutzt, aber da ich diesmal spezifische Vorgaben für Verläufeaus meiner Vorlage hatte, die auch noch außerhalb der Container anfangen, dachte ich, ich importier direkt aus Fireworks. (so genau ließen sich die Verläufe mit ColorZilla nämlich nicht rekonstruieren, leider)

Corina, wie sieht es denn aus, wenn ich mich auf die aktuelle Syntax beschränke, gibt es dann mehr Probleme mit älteren Browsern?

Ich bin zwar auch nicht mehr bereit für den IE 6/7 zu fixen, aber ich möchte schon, dass meine Seite im Großteil der Browser passabel aussieht.

Liebe Grüße

Macks

fricca · #8 (**permalink**) 10.01.2012, 18:14

Zitat:

Zitat von icecream

Corina, wie sieht es denn aus, wenn ich mich auf die aktuelle Syntax beschränke, gibt es dann mehr Probleme mit älteren Browsern?

Du brauchst halt eine Fallback-Lösung. Eine reine Farbe wenn's einfach sein soll, ein Verlaufsbild, wenn es "möglichst gleich" sein soll.
Für "passabel" reicht wohl ersteres.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Unterschiedliche Darstellung in Firefox / IE	memphis2k	CSS	16	30.08.2011 18:40
unterschiedliche Größen auf Safari, Firefox	Htmlcoder	Site- und Layoutcheck	9	05.07.2011 11:51
Unterschiedliche Anzeige im Firefox und IE!??!!?	Schengo	CSS	5	26.10.2007 13:14
unterschiedliche <p> interpretation von IE und firefox	simon2001	CSS	4	27.01.2006 17:31
Unterschiedliche darstellung IE6 und Firefox	kruegge	CSS	1	20.10.2005 18:23