Pixellücken in iPad & Co.
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.
Michael van Laar am 6. April 2010 #
Also ganz ehrlich: Nur wegen eines überdimensionalen Telefondisplays mit wackeligem WLAN und Campingkocherqualitäten werde ich jetzt nicht meine CSS-Dateien dermaßen verschwurbelt ummodeln. Das ist ja fast schon schlimmer als die IE-Hacks. Wobei man die wenigstens sauber vom Rest abtrennen kann. (Und ja, es ist mr bewusst, dass ich mich bei Mac-Jüngern gerade unbeliebt mache ;-) )
Auch wenn es eher unwahrscheinlich ist: Hoffentlich kommt Opera für die mobilen Apfel-Maschinen. Zumindest auf meinem Windows-Mobile-Handy habe ich mit der Opera-Zoomfunktion bisher noch keine solchen seltsamen Dinge erlebt.
Michael am 6. April 2010 #
Also Michael, du sprichst mir aus der Seele. Dieser Hype, der hier gemacht wird ist doch total übertrieben.
Ich bezweifle ja immernoch, das das Ding sich so gut verkaufen wird so lange kein Flash drauf läuft und die Tastatur soll auch nicht gerade ideal sein was man so hört…
Und so lange jeder immernoch schreibt »Ich brauch das nicht, aber es wär bestimmt cool für meine Oma«, ich weiß ja nicht.
Is wohl doch eher was für Fans.
Moss am 6. April 2010 #
Jaja, und überhaupt sind die Trauben ja sowieso zu sauer … ;-)
Marcel Böttcher am 6. April 2010 #
Ich liebe ja wirklich viele Geräte die mir die Jungs da in Cupertino hinwerfen, hierfür einen doch recht spektakulären Margin-Padding-Hack zu basteln halte ich jedoch schon für ziemlich übertrieben.
Bei dem Beispiel von Bitsundso ließen sich solche unschönen Effekte durch eine andere Struktur bereits beheben. Hinter der Navigation (<ul class=»menu«/>), die ja in einem Dunkelgrau gehalten ist, liegt die weiße Fläche des Contents. Natürlich kann dieses Weiß sichtbar werden, wenn durch den Zoom wildes Antialiasing geschieht.
cortex am 7. April 2010 #
junge, junge… du hast probleme.
Lukas am 7. April 2010 #
Gut, dass Apple jetzt auch anfängt Beta-Versionen zu verkaufen.
macx am 7. April 2010 #
Wen stören denn Pixel, Gerrit? Wir haben doch alle gelernt, dass die Webseiten auf unterschiedlichen Medien unterschiedlich aussehen dürfen. Ich kann damit selbst als Detailverliebter sehr gut leben.
Gerrit am 7. April 2010 #
@macx: Mich stören die Pixel, weil es nicht einzelne Pixel sind, sondern fehlerhafte Linien. Das alte Credo des »unterschiedlich aussehen« bedeutet für mich nicht, dass ich auf brandneuer Software Darstellungsfehler akzeptieren muss.
Auf abgerundete Ecken oder Schlagschatten kann man verzichten, wenn es der Browser nicht kann, aber das ist was anderes.
Arne am 7. April 2010 #
@Gerrit: Hast du dide Jungs von bits und so mal gefragt, ob die besagten CSS-Fehler auch auf ihren live-iPads auftreten?
hans am 7. April 2010 #
ich werde das ebenfalls ignorieren. blöd ist nur wenn der kunde ein ipad hat und dann drauf besteht das seine seite da auch sauber aussehen soll. mein ehemaliger chef hat immer alle seiten am iphone kontrolliert und da musste ich dann auch immer nochmal ran … ziemlich nervig …
Lukas am 7. April 2010 #
@hans: Soweit kommt’s noch. Seiten werden sauber im aktuellen Standard geschrieben und den Rest sollten die Browser schon selber packen.
Von Microsoft ist man groben Unfug ja gewöhnt und selbst die wollen sich nun weiterentwickeln. :D
Stefan am 7. April 2010 #
Also Gerrit, ich hoffe, dass dies mit dem Anpassen der Stylesheets nur ein spontaner Gedanke ohne größere Bedeutung ist. Warum sollte ich für ein neues Produkt, was beim Zoomen kleine Darstellungsfehler hat (mehr ist nämlich nicht, oder schränkt es die Funktionalität ein?) mein CSS anpassen?
Da würde ich mir in der Entwicklungsabteilung von Apple mal Gedanken machen wie man so ein Schickimicki-Produkt anpreisen kann, welches solch unschöne Fehler produziert.
hans am 7. April 2010 #
hmm … naja, irgendwie codet man als webdesigner ja nicht für das W3C sondern mehr für die browser, also IE, FF, safari und bald wohl auch vermehrt für solche kisten wie das iphone bzw. ipad. denke wir werden da noch ne menge »spaß« haben in zukunft.
Alex am 7. April 2010 #
Ich frage mich nur, wieso hunderte bzw. tausende (Web-)Designer sich Gedanken darum machen sollen und nicht Apple. Es doch eindeutig eine fehlerhaft implementierte grundlegende Funktion des Browsers, wenn tatsächlich Linien erscheinen, die gar nicht da sein sollen. Oder testet man in Cupertino nur im Querformat ohne zu zoomen?
Willi am 8. April 2010 #
Also ehrlich gesagt kann ich auf dem zweiten Screenshot keine Fehler erkenne. Und eigentlich läuft das Zoomen an meinem Mac (egal in welchem Browser) auch nie ganz sauber ab, deswegen stört mich das auf meinem iPhone auch nicht weiter. Ich meine, wenn man eine Website nicht in 100%, sondern skaliert ansieht, dann muss man halt mit Kompromissen rechnen.
Was mich angeht, hat das jedenfalls weder Einfluss auf meinen geplanten iPad-Kauf noch auf meine Stylesheets. Ganz davon abgesehen, dass das Apples Baustelle ist und nicht meine.
Marc Dávid Várdai am 26. April 2010 #
Wer unausgereifte Produkte verwendet, kann auf solche Probleme nur gefasst sein. Das CSS zu hacken damit auch dieses aufhört, ist schlicht und einfach
lächerlichpeinlich.Sean am 9. März 2011 #
Tolle Kommentare hier! Bringt uns PROFIS echt weiter! :-(
PS: Ach ja ist fast ein Jahr vergangen: Guckt euch mal die Statistik der iPad Verkäufe an! haha… Apple regiert den Markt immer mehr!