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


Weitere Neuigkeiten von der JAX 2015

Autor: Christian Göbel


Technologie


Bevor es zu spät ist und alle Neuigkeiten und Trends von der JAX 2015 in den Tiefen meiner Erinnerungen verschwinden, möchte ich die Gelegenheit nutzen und Euch eine Fortsetzung zu meinem ersten Bericht von der diesjährigen JAX liefern. API-Design mit Java 8 Lambdas (Angelika Langer) Hier gab es eine kurze Einführung zu Lambda-Ausdrücken aus Java …


Beitrag lesen
30
JUL
15

Flickr und das Image Plugin oder „Dees is sowieso blääd“

Autor: Bastian Schwarz


Technologie


Gerade habe ich ein Problem für unser Kundenprojekt „Holsteinische Schweiz“ analysiert: Im Keyvisual wurden bis zu 20 Flickr-Bilder geladen. Die URLs der Bilder wurden über die Flickr API geholt und dann durch das Image Plugin geladen, entsprechend gerechnet und abgelegt. So weit, so gut. Nun das Problem: Für den Dateinamenhash benutzt ajaxImage u.a. die Breite …


Beitrag lesen
21
SEP
11

Messung Dokumentgröße

Autor: Bastian Schwarz


Projekte // Technologie


Seit kurzem scheint die Anzeige der Dokumentgröße über die Web Developer Toolbar im Firefox nicht mehr korrekt zu funktionieren. Es wird häufig die Komprimierung von Scripten / Stylesheets nicht mehr korrekt erkannt.  Alternative Google Chrome – Developer Tools  Kurzanleitung Über Tools – Entwicklertools öffnen, auf „Network“ Tab wechseln, Seite mit Strg+F5 neuladen. Jetzt sieht man …


Beitrag lesen
16
APR
13

imx.Platform: Release-Notes Januar 2020

Autor: Brigitta Zinsser


infomax // Technologie


imx.Platform

Nachdem von zahlreichen Kunden der Wunsch an uns herangetragen wurde, dass sie gerne regelmäßig über aktuelle Neuerungen in der imx.Platform informiert werden möchten, starten wir ab diesem Jahr mit monatlichen Informationen zu den Neuerungen in der imx.Platform. Dieses Mal geht es im Neuerungen, die in den letzten Wochen bis einschließlich 28.01.2020 bereitgestellt wurden.


Beitrag lesen
28
JAN
20