nicht angemeldet
Mobile Safari: Problem mit Overlay von HTML5-video-Tag
Hi Leute,
ich habe ein simples horizontales Menü mit Javascript gebaut, dessen Untermenüpunkte sich jeweils unter dem Hauptmenüpunkt nach unten ausklappen. Es kann dabei auch den Seiteninhalt überlagern. Die CSS-Eigenschaft z-index sorgt dafür, dass das Menü immer über den Inhalt liegt. Per JS ändere ich die CSS-Eigenschaft display:none und display:block für die Untermenüpunkte, die in einer Liste (<ul>) gekapselt sind.
Dies klappt auf allen Desktop-Browsern einwandfrei. Auf dem Mobile Safari des iPad gibt es nun ein komisches Problem: Beinhaltet der überlappte Seiteninhalt Bilder oder Text, können die Untermenüpunkte des überlagernden Menüs einwandfrei angeklickt werden. Wird jedoch ein Videocontent überlappt, der mit dem HTML5-Tag <video> eingebunden wurde, funktionieren nur diejenigen Links des Untermenüs, die nicht im Videocontentbereich liegen. Ok, dachte mir, das geht dann halt generell noch nicht in Mobile Safaris. Aber dann habe ich mal die Untermenüs gleich mit display:block initial sichtbar gemacht und siehe da, nun konnte ich alle Untermenüpunkte anklicken. D.h. der Mobile Safari kommt anscheinend nicht damit klar, dass der display-Status eines Links (oder eines DOM-Vorfahren-Elements) geändert wird, denn dann funktioniert der Link nicht mehr. Das gleiche Verhalten erzielte ich auch mit dem Switchen von visibility:hidden und visibility:visible.
Hat schon jemand Erfahrungen damit gesammelt? Kennt jemand einen guten Workaround?
Danke und Grüße
-
Grüße,
obgleich ich nie auf die idee käme für diese werkzeug der verdorbenheit was zu optimieren:
1)warum JS? was hast du gegen normale CSS menus?
2)hast du versucht maße statt sichtbarkeit zu manipulieren?
MFG
bleicher-
Hi bleicher,
1)warum JS? was hast du gegen normale CSS menus?
Es sprechen für mich keine besonderen Gründe gegen CSS. Ich hatte nur jQuery im Zusammenhang mit einem anderen Projekt entdeckt, und da es für animierte Menüs diverse Funktionen bietet, wollte ich nicht unnötig auf eine andere Technologie setzen.
2)hast du versucht maße statt sichtbarkeit zu manipulieren?
Nein. Was genau soll ich manipulieren? Die Höhe von ul?
Danke und Viele Grüße
-
