css - :before および :after コンテンツに親要素の可視性の問題がある

Question

andを使用して追加された疑似要素を持つコンテナdivがあります。input type="checkbox"::before::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 の例注: 現時点では webkit 用にのみ記述されています。

JavaScript を使用して、コンテナ要素の CSS 可視性プロパティを「visible」から「hidden」に変更します。これは、「可視」から「非表示」に移行する場合にのみ発生するようで、その逆では発生しません。

疑似要素は、消える前にしばらく表示されたままになります。

可視性を切り替えるときに疑似要素が残るのを防ぐことは可能ですか?

PS: これを IE と Firefox で動作させる方法を教えていただければ、永遠の感謝を捧げることができます (この例には Webkit タグしかないことはわかっていますが、それを修正するために必要なことはそれだけですか?)