Issue using the css-checkbox-trigger-modal with a form in Chrome/Chromium

Great video! I absolutely love this technique for dynamically displaying modals. I've used it a couple of times with great success.

Right now I'm creating a dropdown form. When the user presses a certain label, a modal-form should drop down. This technique works on many browsers, but Chrome and Chromium are giving me some headache! What happens is that upon page load, the modal starts out in the 'open' position and immediately slide's back up (or fades, or scales or most css properties I have tried this with). Here's the kicker I just can't wrap my head around: It absolutely ONLY does this when the popup contains a form with an input[type="text"]. Removing the wrapping form, no problem. Having no input text boxes in the form, no problem. Both of them == problem! Does anybody know what's causing this?

Here's a quick gif to visualise the problem.

Here's the code used to recreate the problem (couldn't make a JSFiddle because the problem didn't occur there):

<input type="checkbox" id="modal-form-trigger">
<label for="modal-form-trigger">Open!</label>
<div class="modal-form">
    <!-- Try messing with this to see the bug dissapear -->
    <form action=""><input type="text"></form>  
</div>

.modal-form {
    position: fixed;
    top: 0;

    /* Default to slide-out = animates on page load */
    transform: translate(0, -100%);
    transition: transform linear 1s;

    /* Some verbose styling to see what's going on! */
    margin-left: 30%;
    width: 30%;
    height: 400px;
    background: orange;
}

#modal-form-trigger:checked ~ .modal-form {
    /* removing this doesn't change the buggy behaviour */
    transform: translate(0, 0);
}