mdl dialog boxes in safari don't get hidden

I'm currently using material design lite and the dialog boxes hide fine in browsers, but for some reason when I look at my app on a mobile device the dialog boxes leak out. Has anyone ever dealt with something like this before?

<dialog class="mdl-dialog">
        <section id="oneBefore">
            <h6 class="mdl-dialog__title">Movie 1 05/03/2015</h6>
            <div class="mdl-dialog__content">

                <form action="#">
                    <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--6-col">
                        <input class="mdl-textfield__input" type="text" id="name" pattern="[A-Z, a-z, ]*" required>
                        <label class="mdl-textfield__label" for="name">First Name</label>
                        <span class="mdl-textfield__error">Please enter a valid name</span>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield mdl-cell--6-col">
                        <input class="mdl-textfield__input" type="text" id="name" pattern="[A-Z, a-z, ]*" required>
                        <label class="mdl-textfield__label" for="name">Last Name</label>
                        <span class="mdl-textfield__error">Please enter a valid name</span>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" type="text" id="numberTickets" pattern="[0-9]{2}" required>
                        <label class="mdl-textfield__label" for="numberTickets">Number of tickets</label>
                        <span class="mdl-textfield__error">Please enter a number between 1 and 99</span>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" type="number" id="credit" pattern="" required>
                        <label class="mdl-textfield__label" for="credit">Card Number</label>
                        <span class="mdl-textfield__error">Please enter a valid credit card number</span>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" type="month" id="credit" pattern="" required>
                        <label class="mdl-textfield__label" for="credit">Expiration Date</label>
                        <span class="mdl-textfield__error">Please enter a valid credit card number</span>
                    </div>
                </form>

            </div>
            <div class="mdl-dialog__actions">
                <button type="button" class="agree mdl-button" id="agree1">Submit</button>
                <button type="button" class="close mdl-button" id="close1">Cancel</button>
            </div>
        </section>
        <section id="twoBefore">
            <h6 class="mdl-dialog__title">Movie 1 05/03/2015</h6>
            <div class="mdl-dialog__content" id="twoContentsBefore">
                <img src="img/download.png">
                <p>Thank your for your purchase {{firstName}}</p>



            </div>
            <div class="mdl-dialog__actions">
                <button type="button" class="agree mdl-button" id="agree2">Submit</button>
                <button type="button" class="close mdl-button" id="close2">Cancel</button>
            </div>
        </section>
    </dialog>