Beim Betrachten meiner Seite auf einem iOS-Gerät ist mir aufgefallen, daß der Safari einige Probleme mit der Interpretation von der CSS-Eigenschaft z-index hat. Das Visual, sollte eigentlich im Hintergrund bleiben und der Contentbereich sollte sich beim Scrollen über das Visual schieben. Leider blieb das Visual für einen Moment im Vordergrund, um nach dem Scrollen im Hintergrund zu verschwinden. Im Internet hatte ich mehrere Lösungen gefunden, das Problem via jQuery zu beheben. Da ich aber auf meinem Blog lediglich drei Ebenen verwende wollte ich es unbedingt via CSS lösen. Gestern Abend bin ich dann auf die Lösung gekommen.
Ein vereinfachtes Beispiel: So sieht es aus!
Im Groben ist die Seite wie folgt aufgebaut:
<div class="topline"></div>
<div class="visual"></div>
<div class="content">
<div class="innercontent"></div>
</div>