Aloha ;)

Im Artikel sollte unbedingt auf den hässlichen WebKit Adjacent/General Sibling & Pseudo Class Bug hingewiesen werden, von dem immer noch einige Android-Browser bis in die 4er Version hinein betroffen sind und gegen den mir keine gute Lösung bekannt ist. Die in Artikel gezeigte Lösung frisst auf einigen Geräten eine Menge CPU, also Perfromance und Batterie – nicht verwenden.

Ich stimme dir zu, was die CPU-Auslastung angeht. Aber was wäre, wenn die CPU-Auslastung nicht dauerhaft, sondern nur für, sagen wir, anderthalb Sekunden anfallen würde? (Oder bei genauerer Betrachtung nur für eine halbe...)

Getestet und für funktionierend befunden unter Android-Systembrowser 4.2.2:

@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

window.addEventListener("load",function(){
  if (document.body.style.WebkitAnimation != undefined) {
    var elms = document.getElementsByTagName("input");
    for (var i = 0; i < elms.length; i++) {
        if (elms[i].className.search(/\bhackbox\b/) >= 0) {
           elms[i].addEventListener("change",function() {
             document.body.style.WebkitAnimation = "bugfix infinite 1s";
             window.setTimeout(function(){ document.body.style.animation = ""; },1500);
           });
        }
     }
  }
});

Ich habe das in ein neues bzw. modifiziertes Wiki-Beispiel eingebaut, das man hier testen kann.

Nochmal zur Erinnerung: Die Browser, in denen JavaScript deaktiviert sein kann, benötigen gar keinen Polyfill.

Na los, tu es, zerreiß mich in Stücke ;)

Grüße,

RIDER

P.S.: Wenn das Beispiel scheinbar nicht funktioniert: Das schwierige auf dem Touchscreen ist es, das label überhaupt zu treffen, nur zur Information ;)