Cacher is the code snippet organizer for pro developers

Das Genesis-Framework hat im Zusammenspiel mit Webkit-basierten Browsern (Google Chrome, Safari) ein Problem mit Schriftgrößen. Beim Reload der Seite verändert sich die Größe der Schrift relativ schnell von „groß“ auf „normal“. Manchmal bleibt die Schriftgröße jedoch auch bei einer falschen Größe hängen. Die Lösung für das Problem ist relativ einfach.

Die meisten Stylesheets, die auf dem Genesis-Framework basieren, beginnen in etwa so:

html {
  font-size: 62.5%;
}

body {
  [...]
  font-size:16px;
  font-size:1.6rem;
  [...]
}

Die Einheit rem ist dabei eine sehr komfortable Lösung, die auch im IE (> Version 8) funktioniert. In diesem Zusammenspiel führt die rem-Angabe jedoch zu dem oben beschriebenen Problem.

Um das Problem zu lösen, muss zunächst die rem-Angabe unter body entfernt werden. Anschließend muss folgende Zeile hinzugefügt werden:

body > div { font-size: 1.6rem; }

Die Komplette Lösung sieht dann ungefähr so aus:

html {
  font-size: 62.5%;
}

body {
  [...]
  font-size:16px;
  /* font-size:1.6rem; */
  [...]
}

body > div { font-size: 1.6rem; }

Nun sollte das Genesis-Framework auch in Browsern funktionieren, die auf Webkit basieren.