Transition-delay not working in Chrome and Safari - css

Question

EDIT
I've got it working now, but I'm still not to sure how what I did fixed it. If anyone understands what was happening I'd love to hear about it.
I'm making an animated menu icon and it's is working great...except for the middle bar's transition. It's supposed to disappear using a transition-delay after the top and bottom bars come together during the first animation, and appear after the top and bottom ones meet again for the second one (one third of the way through in both instances). There is no animation on the middle bar, only a transition on the background-color property. I've tried it with both the shorthand transition and with the explicit transition-delay properties. Both give the exact same results. The whole process works great in IE and Firefox, but fails in Chrome and Safari, which makes me think it's a possible webkit issue.
I'm only going to post the relevant code here (since there's almost two hundred lines for the whole thing). The rest is available at this codepen. If you think I should add more code then let me know and I will add more.
CSS:
#menu label span.icon,
#menu.lightbox label span.icon {
height: 5em;
width: 5em;
display: block;
background-color: rgba(255, 255, 255, 1);
background-clip: content-box;
padding: 2em 0;
transition: background-color 0s 1.66s;
}
#menu input[type=checkbox]:checked ~ label span.icon {
background: rgba(255, 255, 255, 0);
background-clip: content-box;
}
HTML:
<form id="menu" name="dateChooser">
<input id="toggle" type="checkbox">
<label for="toggle" onclick="addLightBox(this)"><span class="icon"></span></label>
<fieldset>
</fieldset>
</form>
What really baffles me is that I'm using transition-delay elsewhere and it's working just fine. I use it on the <fieldset> in order to create the lightbox effect. Just in case here's that code too:
fieldset {
background: rgba(0, 0, 0, 0);
transition: background 5s, width 0s 5s, height 0s 5s;
}
#menu.lightbox input[type=checkbox]:checked ~ fieldset {
background-color: rgba(0, 0, 0, .6);
transition: background 5s;
}
Any ideas what I'm doing wrong?
Just a bit more info. I'm using the checkbox hack to initiate the animations/transitions, pseudo elements for the top and bottom bars, and a little bit of javascript to keep the animations from running on load. But all of those seem to be working just fine. I'm also using autoprefixer in codepen, so I'm pretty sure it's not a prefix issue.
Here some gifs showing the correct animation and the faulty one.
Works properly:
No delay for middle bar:

Answer 1

After removing each group of css rules one by one, I finally found the culprit. It turns out that the code causing the issue never made it onto stackoverflow, but was in the codepen. Here's the offending bit of code:
CSS:
#menu input[type=checkbox]:checked ~ label {
margin: 0;
height: 100vh;
width: 100vw;
display: block;
background: rgba(0, 0, 0, 0);
position: relative;
z-index: 99;
top: 0;
left: 0;
cursor: default;
}
HTML:
<form id="menu" name="dateChooser">
<input id="toggle" type="checkbox">
<label for="toggle" onclick="addLightBox(this)"><span class="icon"></span></label>
<fieldset>
</fieldset>
</form>
The issue isn't with span.icon, but came about because it's parent was changing whenever the checkbox was toggled. Label's changes were immediate, so I'm assuming that they forced span.icon to change quickly as well. I'm really not sure why Chrome and Safari had an issue with this, when Firefox and IE11 didn't (I got curious and downloaded Opera as well. It failed just like Chrome did).
The fix is fairly simple. Just make sure that label is set to something that won't disrupt the transition (meaning I fiddle around until I got it working). I'd love for someone to help me understand what was happening and why it's fixed now, but I'm mostly just glad it's working.
Here's the added CSS rule that fixed it:
#menu label {
margin: 0;
display: block;
}
Such a tiny fix.
Here's a demo of the working code (sped up so it's not so painfully slow).