Preface

Some of you may know what powers may be bestowed upon us with the incredible sibling selectors in CSS3:

  input[type=checkbox]:checked ~ label.class { /* pretty styles */ }
input[type=radio]:checked + span.class { /* pretty styles */ }

this is fantastic! it allows us to style our labels according to the input's state!

but wait...

If you try to use this, you may find there's a little bit of a problem, even in modern browsers -- as @chriscoyier explains on css-tricks.com; Safari as new up as ~5.0and Chrome up to ~12.0 have a small bug. The bug basically means that the adjacent sibling (the one you wanted to make all pretty, like) actually will not update its style.

so what; Chrome 12!? that's old news...

Woah there Cowboy, you're right, those browsers are pretty old in the Evergreen world... however: in my company we found that the bug still exists in Mobile Safari on iOS ~7.1.1 ... this was a big problem for us.

but luckily...

Chris had a great solution on his website, it seems to fix the problem (and no jQuery) and everything is magically super again! :D

  body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

whats that smell?..

Well, true enough it fixed our sibling selector update issue... but our clients were compaining about hot-pockets (not the awesome, tasty kind you eat on late night gaming sessions!) ... their phones were starting to get very warm, and sometimes in their pocket if they left their browser running... after 10 minutes using the device on our site things were getting "too hot to handle!". Literally.

Uh, why?..

So that would be because when inspecting the timeline we see this: what is that purple goop? If you don't have much experience with the DevTools timeline, then that purple bar is your browser trying to recalculate the <body>'s dimensions. ( or as we began to affectionately call it: "Activating the pocket-warming feature.") It is doing this because we are constantly animating the padding with the bugfix. I'm not certain either but I would imagine this also affects all children of the body. Everything. (need confirmation here)

oh god, it burns!!!

Well, the whole point of this post is in the code block below. Basically it is necessary to use jQuery or VanillaJSto make this bugfix useful and not potentially dangerous for your customers/viewers. Here is the solution we came up with;

  body.siblingbug { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

  // A global JS event handler which adds a quick animation
// for fixing the bug as defined here: 
// http://css-tricks.com/webkit-sibling-bug/
$(function() {
    var $body = $("body");
    $body.on("click.siblingbug", "input:radio, input:checkbox", function() {
        $body.addClass("siblingbug");
        setTimeout(function() {
            $body.removeClass("siblingbug");
        },100);
    });
});

Basically all this does is run the bugfix animation very quickly on the <body>whenever we click on a radio/checkbox. We chose this approach as it should work everywhere with jQuery's click-handler and garbage collection should take care of the timers.

what else?..

Well, I would highly suggest this code is isolated somewhere, because you don't want it in your project forever... it's a hack for sure, and eventually it will not be needed and should be removed easily.


I hope you enjoyed my first blog post and I hope it helps you!

Simey.


2,503 3 6