Heute eine kleine Episode aus der Reihe „Probleme, die diese Welt nicht auch noch braucht“:
Darf es ein Pixel mehr oder weniger sein?
Rundungs-Chaos bei Sub-Pixeln und wie man damit klar kommt
Die Browser runden prozentuale Werte nicht einheitlich, sondern – wie gewohnt – jeder hat da seine eigene Methode. Das kann einem das Leben als Frontend-Entwickler ganz schön schwer machen. Denn so bekommt man am Ende im Browser unterschiedliche Werte für Breiten oder Höhen ausgeliefert. Ich habe dafür einen kleinen Workaround gefunden und möchte den vorstellen:
Ausgangsfall
Auf der Website einer Kundin gibt es einige Bilder-Galerien. Diese Bilder sind zeilenartig ausgerichtet und haben die gleiche Höhe aber unterschiedliche Breiten. Insgesamt soll die Galerie blocksatz-artig über die gesamte Breite des Content-Bereiches verlaufen.
So sieht es aus im Chrome, Firefox, Internet Explorer und Opera – alles gut:
Problem
Im Safari dagegen werden – bei bestimmten Fensterbreiten – unterschiedliche Bildergrößen angezeigt:
Die unterschiedlichen Höhen ergeben sich, weil die Breiten der Bilder durch die umschließenden Link-Tags prozentual festgelegt sind. Von den Browsern werden diese prozentualen Werte anders umgerechnet. Das führt dazu, dass wie im obigen Beispiel einige Bilder ein Pixel höher oder niedriger sind.
Die Bilder wurden im Content-Management-System von Ihrer Breite so zusammengestellt, dass sie insgesamt je Zeile genau 1200px breit sind. Damit die Galerie auch im Responsive Design funktioniert, bekommt der jedes Bild umschließende Link-Tag eine – abhängig von der absoluten Bild-Breite des Bildes – relative Bildbreite zugewiesen, so dass am Ende jede Zeile wieder auf 100% Breite kommt.
Beispiel für die Zuordnung:
| Absolute breite des Bildes | enTspricht bei 1200px Gesamtbreite | relative Breite des umschliessenden Link-Tags |
|---|---|---|
| 220px | = | 18.33333% |
| 275px | = | 22.91667% |
| 185px | = | 15.41667% |
Lösung
Damit die Bilder die gleiche Höhe bekommen, setzte ich die Höhe des Link-Tags einfach ein paar Pixel niedriger und verstecke den „Überhang“. Letzteres erledigt die CSS-Anweisung „overflow: hidden“. Ersteres muss man ausrechnen:
Da die tatsächliche Höhe der Bilder von der Breite des Browserfensters abhängt, muss sie dynamisch berechnet werden. Dazu kommt mein kleines Script zum Einsatz mit dem ich die Höhen dynamisch berechnen und festlegen kann.
Damit zeigt dann auch der Safari die Bilder so an, wie gewünscht. So sieht es jetzt auf dem iPhone aus:
