:before and :after content with parent element visibility issue

Question

I have a container div that has an input type="checkbox" that has pseudo-elements added using ::before and ::after.

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);

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;
}

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

JSFiddle Example Note: written for webkit only at the moment.

The CSS visibility property of the container element is changed from 'visible' to 'hidden' using JavaScript. This only seems to happen when going from 'visible' to 'hidden', not vice versa.

The pseudo-elements remain visible for a moment before disappearing.

Is it possible to prevent the pseudo-elements from lingering when switching the visibility?

PS: you will earn my eternal gratitude if you can tell me how to get this to work IE and Firefox (I know I only have webkit tags in the example but is that all I need to do to fix it?)