WebKit Sibling Bug

Avatar 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


Probleme mit Hochkommas in Produktliniennamen

Autor: Darian Dragut


Projekte // Technologie


Nach dem Basis-Setup der imx.Platform Instanz für Chiemgau wurde ich mit einem merkwürdigen Fehler konfrontiert. Sowohl in den Suchen für Stämme und Angebote als auch in deren Pflegemasken wurde der Produktlinienbaum nicht angezeigt. Noch merkwürdiger erschien mir der Fehler, nachdem ich feststellte, dass die Produktlinien in der Produktlinien-Administration hingegen problemlos angezeigt werden. Da keinerlei Fehler …


Beitrag lesen
02.
Dez.
2015

<enki/>

Autor: Benjamin Hofmann


Technologie // Über den Tellerrand


Ich bin neulich über Enki, eine kleine interessante App für iPhone und Android gestolpert, die einem Entwickler zu bestimmten Themen täglich kleine Aufgaben gibt, die es zu lösen gilt. Das Ganze dient dazu in wenigen Minuten täglich etwas zusätzliches Wissen aufzubauen oder dieses zu vertiefen. Die App stellt sich wie ein typischer Fitness-Tracker da und …


Beitrag lesen
07.
Sep.
2016

PHP-Funktionen in PHPUnit testen

Autor: Benjamin Hofmann


Technologie


Gestern bin ich auf eine interessante Erweiterung für PHPUnit gestoßen, die es erlaubt auch reine Funktionen als Mock-Objekte anzulegen und deren Verhalten damit zu testen: PHP-Mock bzw. dessen Erweiterung für die Nutzung in PHPUnit. Damit kann man dann sehr bequem auch interne Funktionen testen, z.B. file_get_contents() oder auch ein mail(). Ein so gearteter Test könnte …


Beitrag lesen
13.
Januar
2017

Templating with good ol‘ Javascript

Autor: Benjamin Hofmann


Technologie


Die letzten Tage bin ich auf eine interessante Technik gestoßen, mit der man ein sehr simples Templating in Vanilla JS umsetzen kann. Das Ganze orintiert sich an den Techniken, die z.B. Handlebars.js oder die originale Micro-Templating-Technik von John Resig nutzen, ist jedoch deutlich kleiner. Der Code Der komplette Code basiert auf RequireJS, kann aber natürlich …


Beitrag lesen
29.
Sep.
2016