iOS Hover Bug & Seine Lösung

2016-12-14

1.6k Wörter

1 min Lesezeit

Frontend Entwickler bekommen oft interessanten Bugs Zutun. Überall funktioniert alles bloß, in einem Browser funktioniert eine oder andere Funktionalität 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/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 jQuery beinhaltet, diese sieht folgendermaßen aus. In den Kopfbereich (head) der Website gehört folgende Zeile: ‘‘ 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 JavaScript Datei. Folgender JavaScript Schnipsel muss außerhalb von „document ready“

jQuery(document).ready(function() {
  function () {
    $('*').on('touchstart', function () {
      $(this).trigger('hover');
    }).on('touchend', function () {
      $(this).trigger('hover');
    });
  };
});