Ich wollte in einer Webdesign Vorlage shadowbox verwenden und musste feststellen, dass es damit einige Probleme gibt:
1. Der Overlay Container erstreckt sich nicht auf die ganze Höhe des Displays
2. Der shadowbox Container sitzt immer zuoberst an der Seite. Wenn der Besucher sich daher innerhalb der Seite befindet und die Shadowbox aufruft, kann es vorkommen, dass diese nicht gesehen werden kann
Das Hauptproblem liegt an der fixierten Positionierung des shadowbox containers. MobileSafari kennt “position: fix” nicht. Anscheinend werden alle so positionierten Elemente wie “position: absolute” behandelt. Das andere Problem ist, dass die relative Grösse von 100% angewendet auf den HTML body nicht funktioniert.
Nachdem ich das Web nach möglichen Lösungen durchforstet habe, stellte ich fest, dass es anscheinend noch keine wirkliche Lösung für das Problem gibt. So habe ich mich selber daran gemacht um die Darstellung von shadowbox in MobileSafari in Ordnung zu bringen. Und anscheinend ist das auch gar nicht so schwierig.
In diesem Artikel möchte ich kurz meine Lösung des Problems beschreiben. Da ich jQuery verwendet habe, ist der verwendete Code nicht in allen Projekten 1:1 zu übernehmen, doch denke ich, wird klar, was unternommen werden muss.
Weiter lesen
VN:F [1.9.10_1130]
Rating: 3.0/10 (1 vote cast)
VN:F [1.9.10_1130]
Rating: +4 (from 4 votes)