Artefakte, schwarze Linien, im Safari auf dem iPad

Bei einem Projekt hatte ich ein ungewöhnliches Phänomen: Auf dem Display wurden, horizontale 1 Pixel breite, Linien angezeigt. Diese ließen sich nicht mit Firebug oder anderen Entwickler-Werkzeugen ausfindig machen. Doch nicht nur das: Die Linien blieben dann dauerhaft auf dem Display, auch wenn man eine andere Website aufruft. Nur der Klick auf „Cookies und Daten löschen, in den Einstellungen von Safari sorgte für das Verschwinden der Linien. Dazu muss man sagen, dass das HTML Gerüst nicht besonders einfach gestrickt war. Es war ein Slider mit vielen Video Elemente und Flowplayer Integration.

Nach langer Recherche fand ich einen Artikel, der dieses Phänomen in wenigen Sätzen beschreibt: Demnach war das ein Problem der Rendering-Engine im Safari.

Der Bug kann aber umgangen werden, wenn das richtige Element einen negativen Außenabstand (margin) erhält. Die folgenden zwei Zeilen brachten die Lösung:

1
2
3
4
element {
  margin:  -1px 0;
  padding: 1px 0;
}

Hatte einer von euch schon das Problem?

ALL-INKL.COM