WebKit Sibling Bug

Datum: 13. März 2015
Autor: Benjamin Hofmann


Bei kleineren Anpassungen in einem unserer Projekte ist heute im alten Standard-Browser von Android ein Bug[1] aufgefallen, der dazu führte, dass die Listenelemente mit initial verstecktem Inhalt diesen beim Anklicken nicht anzeigten.

Nach einer kurzen Recherche bin ich hier auch auf die Lösung gestoßen, den Checkbox Hack on Mobile Webkit[2]. Klingt fies, ist aber nur eine kleine Vorsichtsmaßnahme, die man beim HTML und CSS zusammenklöppeln beachten sollte.

Bei der Verwendung des General Sibling (~) Selektoren in CSS in Verbindung mit einer Pseudoklasse (:hover, :checked, …) wird in diesen alten Versionen von WebKit immer nur das nächste Element angesprochen, also quasi das Verhalten des Adjacent Sibling Selektors (+) nachgebildet. Zum besseren Verständnis ein paar…

Beispiele

Ausgangssituation ist folgendes CSS, welches einen nachfolgenden Paragraphen im HTML einblenden soll, sobald eine vorhergehende Checkbox angehakt wurde:

p {display:none;}
input:checked ~ p {display:block;}

Folgendes HTML wird nicht funktionieren, da der versteckte Paragraph nicht das exakt nächste Element zur Checkbox ist, die diesen beim :checked Status einblenden soll.

<input id="foo" type="checkbox" />
<label for="foo">Aus-/Einklappen</label>
<p>Initial versteckter Content.</p>

Stellt man das HTML hingegen so um, dass die Checkbox und der Paragraph direkt nacheinander und auch exakt in dieser Reihenfolge ausgespielt werden, greift das CSS und der Paragraph wird angezeigt sobald die Checkbox angehakt wurde.

<label for="foo">Aus-/Einklappen</label>
<input id="foo" type="checkbox" />
<p>Initial versteckter Content.</p>

Man sieht also: Kleine Änderung, große Wirkung. Und leider kann man diesen alten Browser noch nicht ganz vernachlässigen. Aktuell hat er weltweit gesehen immer noch ca. 20% Marktanteil[3]. Der Bug ist in aktuelleren Versionen von WebKit behoben worden, so dass Chrome und Safari nicht mehr davon betroffen sind.

Quellen

[1] https://css-tricks.com/webkit-sibling-bug/
[2] https://css-tricks.com/forums/topic/checkbox-hack-on-mobile-webkit/#post-106539
[3] http://gs.statcounter.com/#mobile+tablet-browser-ww-monthly-201402-201502

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Docker – Bereitstellung von Betriebs-Umgebungen über Container

Autor: Marc Kurzmann


Projekte // Technologie


Wie der eine oder andere Kollege bereits mitbekommen hat, war unser Informatik-Praktikant Lukas die vergangenen Wochen intensiv mit dem Thema Docker und der Möglichkeit zur effizienten Bereitstellung von Deployment-Umgebungen aus der Produktentwicklung heraus beschäftigt. Das Ergebnis kann sich sehen lassen: Es ist nun möglich mit minimalem Aufwand eine vollständige Betriebsumgebung einschließlich eines deployten Produkts eines …


Beitrag lesen
12.
Dez.
2014

fluidvids

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Gestern kam nichts, dafür heute wieder: fluidvids. Eine sehr kleine Library, um Video-Integrationen ohne viel Aufwand responsiv zu gestalten. Warum ein Skript? Nun wird sich der ein oder andere wahrscheinlich fragen, warum folgendes Konstrukt nicht ausreicht: Ganz einfach deswegen, weil damit ein Seitenverhältnis von 16:9 vorgegeben ist und man ohne zusätzliche Klassen und eine irgendwie …


Beitrag lesen
28.
Sep.
2016

lory

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder habe ich eine kleine schöne Javascript-Library gefunden: lory. Diesmal ist es keine Lightbox-Lösung wie PhotoSwipe gestern, sondern ein simpler Slider. Auch dieses Skript ist auf den mobilen Anwendungsfall ausgelegt und kann von Haus aus mit Swipes umgehen. Auch das sogenannte Infinite-Sliding ist möglich und auch dieses Skript lässt sich über RequireJS nutzen …


Beitrag lesen
23.
Sep.
2016

Von Zend_Date und den ersten Tagen im Jahr

Autor: Benjamin Hofmann


Technologie


Ebene bin ich auf eine interessante Sache bei der Verwendung von Zend_Date und dessen Datumskonstanten (Link) gestoßen. Verwendet man die Konstante Zend_Date::YEAR_8601, die sich nach ISO 8601 richtet, wird das Jahr nicht nach der Woche berechnet, in der sich der gegebene Tag befindet. Nun ist es ja bekanntermaßen so, dass sich die letzte Woche eines …


Beitrag lesen
19.
Dez.
2011