Problem in Google Chrome bei padding-Prozentwerten
bobbix
1 1 0 bobbix
1 
Gunnar Bittersmann
1
Problem in Google Chrome bei padding-Prozentwerten
bobbix
Hallo zusammen,
ich habe folgendes Problem:
Ich habe ein DIV mit einem Innenabstand nach oben von 2%. Danach folgt eine Liste, deren Elemente in zwei Spalten nebeneinander liegen und einen Innenabstand ebenfalls von 2% nach oben haben.
Verkleinert man den Viewport im Google Chrome (bei mir auf 544 Pixel Breite), entstehen 1 Pixel große weiße Abstände zwischen einigen Listenelementen. Im IE und Firefox tritt dieses Problem nicht auf.
Ich habe den Code soweit es geht reduziert und dabei festgestellt, dass die prozentualen Padding-Werte das Problem auslösen. Leider kann ich auf diese nicht verzichten.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
div {
padding-top: 2%;
background-color: #0f0;
}
ul {
list-style: none;
}
li {
float: left;
padding-top: 2%;
width: 50%;
background-color: #f00;
}
</style>
</head>
<body>
<div>Logo</div>
<ul>
<li>1. Link</li>
<li>2. Link</li>
<li>3. Link</li>
<li>4. Link</li>
<li>5. Link</li>
<li>6. Link</li>
</ul>
</body>
</html>
Wäre toll, wenn jemand eine Idee hat, wie man mein Problem lösen könnte.
Vielen Dank.
Liebe Grüße
-
Hallo!
ich habe folgendes Problem:
Verkleinert man den Viewport im Google Chrome (bei mir auf 544 Pixel Breite), entstehen 1 Pixel große weiße Abstände zwischen einigen Listenelementen. Im IE und Firefox tritt dieses Problem nicht auf.
Wäre toll, wenn jemand eine Idee hat, wie man mein Problem lösen könnte.
Es scheint sich dabei um einen Bug in Chrome zu handeln.
Per Google konnte ich aber nichts Hilfreiches finden.
Eine Variante hat das Auftreten dieses Fehlers aber zumindest drastisch reduziert - siehe: http://jsfiddle.net/7wNTK/2/
Für die LIs einfach folgendes im Stylesheet verwenden:
li { padding-top: 2%; padding-top: calc(100% * 0.02 - 1.5px + 1px); }Irgendwie scheint ihm das "Gefrickel" zu helfen ... - k.A. warum. ;-)
Gruß Gunther
-
@@Gunther:
nuqneH
Für die LIs einfach folgendes im Stylesheet verwenden:
li {
padding-top: 2%;
padding-top: calc(100% * 0.02 - 1.5px + 1px);
}Nö. Einfach ist ~~~css li { padding-top: 2%; padding-top: calc(2% - 0.5px); }Irgendwie scheint ihm das "Gefrickel" zu helfen ... - k.A. warum. ;-)
In der Tat Gefrickel, was du da anbietest. Bei der einfachen Variante dürfte auch ersichtlich sein, warum’s hilft.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
nuqneH
Nö. Einfach ist
li {
padding-top: 2%;
padding-top: calc(2% - 0.5px);
}> > > > Irgendwie scheint ihm das "Gefrickel" zu helfen ... - k.A. warum. ;-) > > In der Tat Gefrickel, was du da anbietest. Bei der einfachen Variante dürfte auch ersichtlich sein, warum’s hilft. Nö! :-P Damit ersichtlich wäre warum es hilft, müsste man ja zuerst wissen, wieso, warum, weshalb der Fehler auftritt. Und wissen wir das? Ich jedenfalls bis jetzt (noch) nicht. Soweit ich das sehe, produziert Chrome bei gewissen Viewportbreiten einen 1px breiten Abstand zwischen den Elementen (gehört also quasi zum Body), wo gar kein Abstand sein dürfte. Gruß Gunther-
@@Gunther:
nuqneH
Damit ersichtlich wäre warum es hilft, müsste man ja zuerst wissen, wieso, warum, weshalb der Fehler auftritt.
Rundungsfehler beim Berechnen, für welche y der Bereich von x₁ bis x₂ gefärbt werden soll.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
nuqneH
Damit ersichtlich wäre warum es hilft, müsste man ja zuerst wissen, wieso, warum, weshalb der Fehler auftritt.
Rundungsfehler beim Berechnen, für welche y der Bereich von x₁ bis x₂ gefärbt werden soll.
Vermutlich.
Erstaunlich finde ich allerdings, dass- der Safari das Problem nicht zu haben scheint
- Chrome doch ansonsten eigentlich "keine Probleme" (mehr) mit Subpixeln hat
Das erklärt jetzt aber immer noch nicht, warum es bei deiner Variante "ersichtlich" sein soll.
Denn die 2% können ja theoretisch jeden x-beliebigen Wert annehmen und davon 0,5 subtrahiert kann folglich ebenso x-beliebig sein.Gruß Gunther
-
-
-
-
-
Verkleinert man den Viewport im Google Chrome (bei mir auf 544 Pixel Breite), entstehen 1 Pixel große weiße Abstände zwischen einigen Listenelementen. Im IE und Firefox tritt dieses Problem nicht auf.
Mir scheint, ein gleichartiges Problem ist auf der Seite The 1 Pixel Rounding Error Problem beschrieben - ohne Lösung!
Gruß H.
-
Hallo Herrmann und Gunther,
vielen Dank für Deinen Link Herrmann, sehr interessanter Artikel und vielen Dank Gunther für Deine Recherche und Deinen Lösungsvorschlag. Ich habe ihn übernommen. Sehr ungewohnt für Google Chrome spezielle Bugfixes in CSS schreiben zu müssen. :-)
Schöne Grüße Euch Beiden und ein schönes Sommerwochenende.
bobbix
-
@@bobbix:
nuqneH
Verkleinert man den Viewport im Google Chrome (bei mir auf 544 Pixel Breite), entstehen 1 Pixel große weiße Abstände zwischen einigen Listenelementen. Im IE und Firefox tritt dieses Problem nicht auf.
Wenn du dem ul-Element statt den li-Elementen die Hintergrundfarbe verpasst, tritt dieses Problem auch nicht auf.
Du müsstest natürlich per „Clearfix“ dafür sorgen, dass das ul-Element eine Höhe hat: Pseudoelement oder overflow: hidden.
Oder verwendest inline-block statt float.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
nuqneH
Oder verwendest inline-block statt float.
Bist du dir da ganz sicher?
Ich habe nämlich u.a. die inline-block Variante ausprobiert und dabei trat das Problem sehr wohl auf.Gruß Gunther
-
@@Gunther:
nuqneH
Oder verwendest inline-block statt float.
Bist du dir da ganz sicher?
Ich habe nämlich u.a. die inline-block Variante ausprobiert und dabei trat das Problem sehr wohl auf.Das Oder bezog sich auf den „Clearfix“, nicht darauf, dem ul-Element statt den li-Elementen die Hintergrundfarbe zu verpassen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
હેલો
Ich habe den Code soweit es geht reduziert und dabei festgestellt, dass die prozentualen Padding-Werte das Problem auslösen. Leider kann ich auf diese nicht verzichten.
Ich hab's mal Online gestellt, damit jeder es direkt testen kann. Einfach den „Result“-Bereich vergrössern und verkleinern.
Wäre toll, wenn jemand eine Idee hat, wie man mein Problem lösen könnte.
Evtl. dem ul-Element die Hintergrundfarbe geben?
બાય
--
.
..:-
Evtl. dem ul-Element die Hintergrundfarbe geben?
Gute Idee. Der Rundungsfehler besteht zwar trotzdem noch, aber da der 1 Pixel große Abstand die gleiche Farbe wie die Listenelemente hat, fällt er nicht mehr auf. Damit kann man leben, finde ich. Bei einem flexiblen Layout messe ich sowieso nicht mehr alles pixelgenau ab.
ul { list-style: none; overflow:hidden; background-color: #f00; }Vielen Dank nochmals und schöne Grüße
bobbix
-
@@bobbix:
nuqneH
aber da der 1 Pixel große Abstand die gleiche Farbe wie die Listenelemente hat
Wie ich schon sagte, sollten die Listenelemente gar keine Farbe haben. (Wartbarkeit (single point of change), Performanz)
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-