Überspringen und zum Inhalt gehen →

iOS Hover Bug & seine Lösung

Frontend Entwickler bekommen oft mit nicht vorhersehbaren Bugs zutun. Überall funktioniert alles bloß, in einem Funktioniert eine oder andere Aufgabe oder Funktion nicht. Hier sprechen wir über den iOS Hover Bug. Dieser ist den Apple und allen anderen Entwicklern schon bekannt, diese Information entnehme ich von https://github.com/twbs/bootstra***

– https://github.com/twbs/bootstrap/issues/12832
– https://github.com/twbs/bootstrap/issues/10828
– https://github.com/twbs/bootstrap/issues/12692
– https://bugs.webkit.org/show_bug.cgi?id=158517
in all den Links ist ein und derselbe Bug beschrieben nämlich, dass iOS Geräte die Touch Möglichkeiten haben den Css-Hover Effect nicht ausführen.

Dafür gibt es eine Lösung die CSS und beinhaltet, diese sieht folgendermaßen aus.

In den Kopfbereich (head) der Website gehört folgende Zeile:

<script>document.addEventListener("touchstart", function(){}, true);</script>

Wichtig ist:
In der CSS-Datei müssen alle Elemente, die einen Hover State besitzen (element:hover) um eine „active“ Pseudoklasse ergänzt werden. Das ganze sieht dann zum Beispiel so aus:

element:hover,
element:active {
-webkit-user-select: none;
-webkit-touch-callout: none;
}

Das negative dran ist, dass JEDES CSS-Element das ein Hover hat folgende schon oben beschriebenen CSS-Zeilen bekommen MUSS.
Somit wird der CSS Code bei jedem Code um 5-Zeilen länger!

Meine Lösung beinhaltet nur den EINMALIGEN Eingriff in die Datei.
Folgender JavaScript Schnipsel muss außerhalb von „document ready“

jQuery(document).ready(function() {
//dein Code
});


/* iOS Hover Fix*/
var iOSHover = function () {
$('*').on('touchstart', function () {
$(this).trigger('hover');
}).on('touchend', function () {
$(this).trigger('hover');
});
};
iOSHover();

Published in Programme

Comments

Kommentar verfassen