Der lineare Verlauf von Webkit wird nicht mehr korrekt gerendert
Ich bin auf ein seltsames Problem in Webkit-Browsern (Chrome, Opera) gestoßen.
Testfall: Ссылка (check in Chrome oder der neuesten Oper)
Ich habe zwei Spalten, die von einem Container umschlossen sind. Ich verwende einen CSS-Farbverlauf, um Hintergründe für diese beiden Spalten zu erstellen. Der Farbstopp ist auf 66% eingestellt und die Spalten haben die gleiche 66% Breite (mit Padding zum Versetzen der rechten Spalte).
Es wird korrekt in Firefox gerendert - sowohl Spaltenlayout als auch Gradient-Stopp-Punkt-Übereinstimmung, aber in webkit-basierten Browsern entspricht der Farb-Stop nicht der Spaltenbreite, obwohl ich 66% verwendet habe.
HTML:
%Vor%CSS:
%Vor%Screenshot:
Ich habe Colorzilla Generator verwendet, um den Farbverlauf zu erzeugen.
Gibt es Fehlerberichte oder Problemumgehungen für diese Art von Problem?
1 Antwort
Update 2015-11-25
Eine Lösung dafür ist in Vorbereitung - siehe Ссылка .
tl; dr;
Es ist eine bug -Funktion in Chrome.
Details
Ich habe meine Testfälle in Ссылка massiv vereinfacht und es scheint immer noch ein Problem in Chrome zu sein - und das habe ich habe einen Fehlerbericht gefunden (siehe unten).
%Vor%css
%Vor%Müssen vielleicht wieder Faux Columns oder andere old-school Designs verwenden ... oder wenn Ihre Benutzerbasis nur die neuesten Browser verwendet, probieren Sie die neue blank und benutzen Sie flexbox;)
Bearbeiten
Ich habe einen Fehler gefunden - Ссылка und Ссылка
skia diskretisiert die Farben in 256 Stufen für (viele) Geschwindigkeit. hartkantige
Farbverläufe wie diese (wo es zwei Farben bei der gleichen Farbe gibt) Auf jeden Fall diese Beschränkung aufzeigen. Wir können nach Wegen suchen, um das
zu erhöhen Genauigkeit, aber es wird eine echte Leistung Kosten, so müssen wir uns entscheiden wie wichtig dieses besondere Verhalten in der Praxis ist.
Tags und Links css3 webkit linear-gradients