Ich habe eine Art "Widget" - eine Datentabelle mit einigen umfangreichen Funktionen wie Sortieren, Zeilenauswahl und anderen.
In einigen Fällen (Platzierung / Verschachtelung von Widgets im DOM) werden Klicks auf die Zeilen in iOS 7 Safari nicht ausgelöst.
Widget verwendet jQuery 1.6.4
Ich kann keinen ganzen Widget-Code veröffentlichen (und das wird wirklich passieren;)), aber ich kann ein Reproduktionsszenario auf den folgenden Fall eingrenzen:
div , das normalerweise ausgeblendet ist und sichtbar wird, dann wird die übergeordnete Zeile verschoben. Die Sichtbarkeit wird nur mit CSS ausgelöst click Event-Handler. Egal was es macht. In meinem Beispiel wird ein alert() ausgelöst
overflow-y ist auf auto festgelegt.
Hier ist ein jsFiddle: Ссылка
Auf jedem Desktop-Browser werden Elemente erfolgreich verschoben, ein Klick wird ausgelöst. Auf iOS7 funktioniert Hover, aber Klick wird NICHT ausgelöst.
HINWEIS : Unter iOS müssen Sie zweimal tippen, um click auszulösen. Der erste Klick löst hover aus und Sie werden ein "checkbox" sehen, dann muss der zweite tap ein click auslösen, aber nicht ...
Jede dieser Bedingungen ist erforderlich, um ein Problem zu reproduzieren. Entferne ein einzelnes und es fängt an zu arbeiten ...
Wenn Sie das Aussehen eines "Kontrollkästchens" entfernen, wird der Klick funktionieren ( Ссылка ).
Wenn Sie einen Höhenfix entfernen, funktioniert er ( Ссылка ).
Wenn Sie ein Überlaufscrolling entfernen, funktioniert es ( Ссылка ).
Jede Problemumgehung ist erforderlich, aber die Funktionalität sollte nicht geändert werden. Also, ich kann nicht "checkbox", Größe fix, Schweben, Klicken oder Überlauf Scrolling entfernen. Auch eine Änderung des HTML-Markups ist kaum möglich.
HINWEIS Ich habe eine Lösung - siehe meine Antwort unten. Aber ich brauche immer noch einen besseren Workaround, um CSS so matschig wie möglich zu halten.
HINZUFÜGEN : Ein Fehler wurde an Apple gesendet # 16072132
Um iOS dazu zu bringen, Hover-Zustände zu ignorieren, versuchen Sie Folgendes:
%Vor%Sie können dies für jedes Element verwenden, damit es wie erwartet funktioniert.
Plötzlich habe ich eine Lösung ... Mit JavaScript kann ich :hover selector entfernen, aber die Funktionalität beibehalten.
Wenn ich die Checkbox-Sichtbarkeit nicht durch CSS :hover , sondern durch die Klasse auslösen und über Javascript setzen werde, wird es funktionieren.
Meine aktuelle Arbeitslösung erfordert keine Änderungen in einer ganzen Codebasis und funktioniert in unseren Bedingungen gut.
MutationObserver , Monitorknoteneinfügung in head
link ist, überprüfen Sie document.styleSheets
document.styleSheets[n].rules[i].selectorText ) :hover enthält, prüfen Sie Stile für diesen Selektor display von none oder visibility von visible unterscheiden - dies ist ein "Show by Hover" -Stil :hover durch .hover und deklarieren Sie einen body Delegat für mouseenter und mouseleave Ereignisse, die .hover class auf dem ausgelösten Element Vollständiger Quellcode hier: Ссылка
Tags und Links css ios mobile-safari click hover