CSS :before&:after Content w/ Parent Element Visibility Issue

I am using Chrome (build 25.0.1364.97 m) when I write this. There seems to be a lag time between changing the visibility of the parent container to "hidden" and the moment that the pseudo elements, created with the :before and :after CSS selectors, actually disappear.

by xiondark2008

HTML

<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
<div id="parent">
    <div id="child">
        <input type="checkbox" class="toggle_switch" />
        <input type="checkbox" class="toggle_switch" />
        <input type="checkbox" class="toggle_switch" checked/>
        <input type="checkbox" class="toggle_switch" />
    </div>
</div>

CSS

div {
    padding: 10px;
    border: 2px solid black;
    background-color: green;
}
div div {
    position: relative;
    top: 50px;
    background-color: white;
}
#parent {
    height: 150px;
}
#child {
    visibility: visible;
}
input[type=checkbox].toggle_switch::after {
    content:'';
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
    border: 1px solid #919191;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #f0f0f0;
    -webkit-transition: 1s all linear;
}
input[type=checkbox].toggle_switch::before {
    content:'OFF';
    margin: 0;
    padding: 0;
    width: 38px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 18px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    font: 700 14px sans-serif;
    line-height: 22px;
    color: #7f7f7f;
    text-shadow: none;
    background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;
    border-color: #7d7d7d;
}
input[type=checkbox].toggle_switch {
    -webkit-appearance: none;
    padding: 0;
    width: 58px;
    height: 22px;
    position: relative;
    border-radius: 3px 0 0 3px;
    -webkit-transition: 1s all linear;
    vertical-align: text-top;
}
input[type=checkbox].toggle_switch:checked::after {
    left: 36px;
}
input[type=checkbox].toggle_switch:checked::before {
    content:'ON';
    left: 0px;
    color: #fff;
    text-shadow: 0 -1px 0 #1b3b6f;
    background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    box-shadow: inset 0 2px 2px #2a5bb3, inset -3px 0 3px #2a5bb3;
    border-color: #1654b5;
}

JavaScript

function hiding() {
    var child = document.getElementById("child");
    child.style.visibility = "hidden";
}
var hide = document.getElementById("hide");
hide.addEventListener("click", hiding);

function showing() {
    var child = document.getElementById("child");
    child.style.visibility = "visible";
}
var show = document.getElementById("show");
show.addEventListener("click", showing);