Was schon auf dem iPhone ab und zu gestört hat, wird nun auf dem iPad zu einem regelrechten Ärgernis für detailversessene Webbetrachter: Rundungsfehler beim stufenlosen Zoomen führen zu hässlichen Pixel-Lücken, die bei nebeneinander liegenden HTML-Elementen oder bei eigentlich nahtlos aneinander anschließenden Flächen sichtbar werden und – je nach Zoomstufe – massiv hässlich sind:

Anbei ein paar Beispiele aus dem iPad-Simulator:

Neben den sehr fetten Unterstreichungen (gegen die man gar nichts tun kann) sieht man ein paar Linien, die da nicht hingehören, und zwar immer an Stellen, wo bestimmte HTML-Elemente die Kanten ihrer Boxen haben. Die Erklärung ist eigentlich recht simpel: das iPad besitzt zwar eine Viewport-Breite von 1024 Pixeln, befindet sich jedoch bei vielen nicht-optimierten Websites (und natürlich im Hochformat-Modus) nicht bei 100% Zoomstufe, sondern verkleinert den Inhalt ein wenig. Dabei entstehen krumme Pixelangaben für die Breiten von Elementen, und dann kommt es zu »zwischen den Pixeln« platzieren Boxen, die dann solche seltsamen Effekte aufweisen.

Ich habe leider noch kein Allheilmittel parat, außer den Hinweis, dass man an bestimmten »Nahtstellen« durchaus zwei Elemente ein wenig überlappen lassen kann, indem man so oder so ähnlich vorgeht:

margin-top: -3px; padding-top: 3px;

Man schiebt das untere Element mit einen negativen Margin um 3 Pixel weiter nach oben – es überlappt mit dem darüber befindlichen Element. Um die Konsistenz des Layout wiederherzustellen, gibt man dann den gleichen Abstand wieder als Padding hinzu. Keine schöne Lösung, aber bis ich etwas besseres gefunden habe, mag es helfen.