WebKit Sibling Bug

Benjamin Hofmann 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


AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Autor: Stefan Oswald


Technologie // User Experience & Design


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine „Ladeschnecke“ (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im „beforeLoad“-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im „complete“-Ereignis wieder entfernt oder unsichtbar gemacht wird. …


Beitrag lesen
23
JUL
14

Parallax Scrolling – ein cooler Effekt der nicht ganz neu ist

Autor: Axel Güldner


Technologie // User Experience & Design


Heute wollte ich mal kurz einen Effekt vorstellen, den viele sicher schon mal gesehen haben, ihn toll fanden, aber keine Ahnung hatten wie das eigentlich funktioniert. Das Thema ist Parallax Scrolling, ein Effekt der auf Websites auftritt, wenn verschiedene Hintergrund Ebenen ein unterschiedliches Scrollverhalten aufweisen. Dies wirkt unerwartet und frisch, da dies nicht die gewohnte …


Beitrag lesen
17
NOV
11

Besuch der c’t WebDev 2020

Autor: Florian Sauer


Technologie


Logo c't WebDev 2020

Vom 4.-6. Februar 2020 haben Matthias und ich in Köln die zweite c’t WebDev, eine Frontend Konferenz, besucht. Diese war in zwei Teile aufgegliedert. Am ersten Tag wurden optionale Workshops angeboten. Die folgenden zwei Tage über fand die eigentliche Konferenz mit den Vorträgen statt.


Beitrag lesen
13
FEB
20

Zepto.js

Autor: Benjamin Hofmann


Technologie


Heute nur ein kurzer Link zu einer Alternative zu jQuery mit einem wesentlich kleinerem Footprint (30 statt 85 KB), aber der gleichen API und Funktionalität: Zepto.js Bei einem unserer Kunden ist das bereits im Einsatz und mittels folgender Zusatz-Module und einem kleinen Polyfill auch als Basis für das imx.Autocomplete und imx.Mapwork im Einsatz, welche beide …


Beitrag lesen
30
SEP
16