Problembeschreibung

In einem VirtueMart-Shop-Projekt (VM 2.x) werden die Kategorien auf den Kategorieauswahlseiten floatend angezeigt - also nicht in fixen Spalten, sondern immer hintereinander weg Zeile für Zeile, eben wie Fließtext. Damit dabei nicht alles durcheinander purzelt, sondern eine saubere Anordnung in Spalten- und Zeilenoptik, wird die Beite der Vorschaubildblöcke fest definiert und die Höhe für alle Blöcke per jQuery.SyncHeight in ihren Höhen syncronisiert.

Prinziell funktioniert das mit diesem jQuery-AddOn auch ganz hervorragend. Allerdings tritt beim Floaten folgender Fehler auf:
Der höchste Block mit der höchsten Vorschaugrafik bestimmt ja die Höhe auf die alle anderen kleineren Blöcke syncronisiert werden. Bis zu diesem höchsten Block ist das Floaten korrekt. Der nächste Block bei dem eine Zeilenumbruch erfolgt, floatet jedoch nicht mehr korrekt. Er stößt quasi an den höchsten der darüberliegenden Zeile an, bleibt dort hängen anstatt nach vorne an den linken Zeilenanfangsrand zu rutschen.

Lösung - Workaround

Soweit zur Beschreibung wie sich der kleine Bug äußert. Hier nun als Lösung ein kleiner und einfacher Work-around. Dieser hat kann sich jedoch projektabhängig bei dem einen oder anderen als nicht gangbar erweisen, meist dann wenn es bei der Darstellung der Blöcke auf den Pixel genau ankommt.

Im Script jquery.syncheight.js (in meinen Projekten im Pfad: /libraries/jyaml/yaml/add-ons/syncheight) gibt es eine Zeile max = val; Diese habe ich einfach folgend erweitert zu max = val + 1;. Damit werden alle Blöcke immer einen Pixel größer gemacht als normal von syncHeight vorgesehen. Somit kann die nachfolgende Zeile an dem höchsten Block "vorbei" bis nach vorne rutschen. Mitunter genügt sogar der 1 zusätzliche Pixel nicht. Zur Sicherheit habe ich dann sogar 3px addiert.

Bisher konnte ich keine alternative Lösung hierfür finden.