Gunther: Mobile Safari - unterschiedliches Verhalten je nach Orientation?

Hallo werte Selfgemeinde,

ich stehe vor einem Rätsel. Es geht um ein Dropdown Menü, genauer gesagt um eines mit einer Drop-Line.

Der übergeordnete Menüpunkt ist ein 'SPAN' (hab' es auch schon mit einem 'A' ausprobiert) in einem 'LI' Element.

Hovert der User über dieses 'LI' Element, wird die Drop-Line (eine weitere 'UL') eingeblendet.

Das "funktioniert" problemlos in allen Desktop-Browsern mit Maus und auch in allen Mobile Browsern unter Android.

Aber ..., im Mobile Safari auf einem iPad (4) funktioniert das nur im Portrait-Modus. Bei einem Tap auf den übergeordneten Menüpunkt wird das Submenu eingeblendet und bleibt solange sichtbar, wie man nirgendwo anders tapped.

Dreht man das iPad aber jetzt in den Landscape Modus, so "blitzt" das Submenu beim Tap nur kurz auf und verschwindet sofort wieder.

So jedenfalls laut Tests eines Freundes, da ich selber kein iPad besitze.

Bei Google habe ich nichts Verwertbares gefunden ...!
Kennt jemand von euch dieses Verhalten?
Oder noch besser, kann mir jemand sagen, woran das liegt, bzw. wie ich ein gleiches Verhalten unabhängig von der Ausrichtung erreichen kann?

Gruß Gunther

  1. Hallo werte Selfgemeinde,

    kurzes Update (für's Archiv):
    Es scheint sich tatsächlich um einen Bug im Mobile Safari 6 zu handeln. Und zwar derart, dass im Landscape Modus die :hover Styles bei einem Tap auf ein Element (z.B. 'span') korrekt angewendet werden, und bei einem erneuten Tap auch wieder "entfernt" werden.

    Im Portrait Modus "funktioniert" das Entfernen aber nicht immer/ zuverlässig, d.h. manchmal werden die Styles entfernt, aber mnachmal eben auch nicht. Was dann zur Folge hat, dass das (Sub)Menü eben offen bleibt.

    Ich teste jetzt mal die Variante, die :hover Styles (bei aktiviertem JS) von einer Klasse abhängig zu machen, die per JS gesetzt, bzw. gelöscht wird.

    Für deaktiviertes JS bleibt imho nur eine Variante mit einem 'A' Element welches ein leeres 'href' Attribut hat (dadurch wird die Seite beim zweiten Tap neu geladen, wodurch das Menü wieder im Ausgangszustand, also geschlossen ist).

    Dazu noch eine Frage:
    Ich bin mir nicht sicher, aber ich würde die HTML5 Spec eigentlich eher dahin interpretieren, dass ein leeres 'href' Attribut (href="") nicht zulässig ist.
    Der Validator (validator.nu) hat allerdings nichts zu meckern.

    Gruß Gunther