Zitternder Text auf dem iPhone

Lesezeit: 3 Minuten

Hier ist ein seltsamer Fehler, der auf dem iPhone (4S) auftritt, aber nicht auf dem iPad (3) oder einem Desktop-Browser. Wenn ich eine Seite von dieser Website lade, sagen Sie:

http://www.courtniv.com/what-is-eco-fashion/

Auf meinem iPhone wirkt der Breadcrumbs-Text („Home » JustMeans » What is Eco Fashion?“) schizophren. Es ändert schnell die Größe, hin und her, etwa dreimal pro Sekunde, von der richtigen Größe zu einer Größe, die ein paar Punkte größer ist. Manchmal wackelt auch der Artikeltext, manchmal schon ab dem zweiten Absatz. Manchmal ist auch der Copyright-Text in der Fußzeile instabil.

Ich habe versucht zu entfernen:

<?php get_template_part('includes/scripts'); ?>

aus der Fußzeile, und zuerst schien es zu funktionieren, aber dann, ein paar Aktualisierungen später, war das Problem zurückgekehrt. Gleiche Geschichte, als ich die Deklaration der Schriftgröße aus meinem benutzerdefinierten Stylesheet entfernte. Ich habe Javascript auf meinem iPhone deaktiviert und das Problem blieb bestehen.

Seltsamerweise passiert das nicht jedes Mal, wenn ich die Seite auf mein iPhone lade, aber meistens schon. Wenn ich etwas im Code ändere, stoppt er oft bei der nächsten Aktualisierung, kehrt aber einige Aktualisierungen später zurück. Manchmal, wenn ich die Seite lade und eine Weile warte, ohne etwas zu tun, hört die Schizophrenie auf. Manchmal hört der Artikeltext auf zu wackeln, aber die Breadcrumbs wackeln weiter. Das Aktualisieren der Seite bringt es fast immer gleich zurück. Und es geht definitiv weiter, nachdem die Seite fertig geladen ist. Im Moment läuft es seit zehn Minuten. Es wackelt weiter, nachdem der Bildschirm gesperrt, die Ausrichtung geändert und Safari geschlossen und wieder geöffnet wurde.

In meinen 10 Jahren Webdesign habe ich so etwas noch nie gesehen. Irgendeine Ahnung, woran das liegt und/oder wie man es beheben kann? Vielen Dank!

  • +1 für reine WTF. Ich würde einen Fehler gegen WebKit melden.

    – Rickster

    30. Mai 2012 um 23:54 Uhr

  • Reproduziert auf dem iPhone 4S. Ich schaue mir das morgen mal an, weil es in der Tat extrem bizarr ist.

    – dreißig Punkte

    31. Mai 2012 um 0:02 Uhr

Benutzer-Avatar
John Klakegg

So ein Problem habe ich noch nie erlebt. Hier haben Sie jedoch zwei Lösungen.

Lösung Nr. 1

Das Hinzufügen des Folgenden zum CSS sollte verhindern, dass die Größe der Schriftart geändert wird.

html {
  -webkit-text-size-adjust:none;
}

Da es nur auf dem iPhone ein Problem zu sein scheint, wäre es sinnvoll, nur dieses Terminal mit Medienabfragen anzusprechen:

@media only screen and (max-device-width: 960px) { 
  html { 
    -webkit-text-size-adjust:none; 
  }
}

Anstatt dies anzuwenden html du könntest es ergänzen #breadcrumb, .post-meta und andere Selektoren, die das gleiche Größenänderungsproblem haben.

Lösung Nr. 2

Das Problem scheint auch mit dem folgenden Regelsatz zusammenzuhängen:

a,
.textwidget a img,
div.category a,
.sociable ul li {
  -webkit-transition: all .3s ease;
  -khtml-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

ändere das in:

@media only screen and (max-device-width: 960px) { 
  a,
  .textwidget a img,
  div.category a,
  .sociable ul li {
    -webkit-transition: none;
    transition: none;
  }
}

wird das Problem auch lösen.

In Ihrem Fall hätte ich Lösung Nr. 2 gewählt, da Lösung Nr. 1 die Textgröße der Zielelemente verkleinert.

  • Haben Sie eine dieser Lösungen getestet?

    – dreißig Punkte

    31. Mai 2012 um 21:37 Uhr

  • Ja, beide Lösungen auf einer lokalen Kopie getestet.

    – John Klakegg

    31. Mai 2012 um 23:06 Uhr

  • Vielen Dank! Ihr Genie ist so groß wie Ihre Freundlichkeit.

    – Zade

    1. Juni 2012 um 4:11 Uhr

1368530cookie-checkZitternder Text auf dem iPhone

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy