Element positioning in Internet Explorer

Question

I have booking form.

In the process of submitting the form, an animated loader is displayed. The loader is a div with id = "booking_loader". Watch how it looks like in Chrome: https://youtu.be/XeRSx3VTt3g.

But here's how it looks in the Internet Explorer: https://youtu.be/djaCuHQc9Qw

In Explorer, the element is bound to screen coordinates and does not seem to see the parent's div. He gets fixed position, but should be absolute.

HTML:

<div id="Booking-Panel">                         
<h5 class="text-white">Запис на консультацію</h5>
<form action="/Home/Booking" id="bookingform" method="post">    
    <div class="group-12 group-top blur bookingpanel" id="bookingpanel">
                <div class="group-item element-fullwidth">
                    <div class="form-group form-group-label-outside">
                        <label for="index-name">Ім'я</label>
                        <input id="index-name" placeholder="Iм'я" type="text">
                    </div>
                </div>
                <!-- Others inputs -->
                <div class="group-item element-fullwidth offset-top-20 text-center text-md-left">
                    <button id="submit-booking" type="submit" class="btn-ellipse btn btn-primary">Записатись</button>
                </div>
    </div>
</form>
    <div class="loader hidden-loader" id="booking_loader">
        <div id="largeBox"></div>
        <div id="smallBox"></div>
    </div>
<script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/api2/r20171212152908/recaptcha__uk.js"></script><script src="https://www.google.com/recaptcha/api.js?hl=uk"></script>

css:

     #Booking-Panel {
        position:relative;
        transition: 0.5s;
    }
.loader {

    width: 3em;
    height: 3em;
    animation: loaderAnim 1.35s infinite;
    outline: 1px solid transparent;
    position:absolute; 
    left:158px;
    top: 215px;
    transition: 0.6s;
}

#largeBox
{
    height: 3em;
    width: 3em;
    background-color: #ececec;
    outline: 2px solid transparent ;
    position: fixed;
    border-radius:1px;

}
#smallBox {
    height: 3em;
    width: 3em;
    background-color: #54717f;
    position: fixed;
    z-index: 1;
    outline: 3px solid transparent;
    animation: smallBoxAnim 1.35s alternate infinite ease-in-out;
    border-radius:1px;
}

Where is the mistake?

Answer 1

Instead of making use of tweaked around values for centering the loader:

.loader {

    width: 3em;
    height: 3em;
    animation: loaderAnim 1.35s infinite;
    outline: 1px solid transparent;
    position:absolute; 
    left:158px;
    top: 215px;
    transition: 0.6s;
}

try using transform as below:

.loader {
width: 3em;
height: 3em;
animation: loaderAnim 1.35s infinite;
-webkit-animation: loaderAnim 1.35s infinite;
-moz-animation:    loaderAnim 1.35s infinite;
-o-animation:      loaderAnim 1.35s infinite;
outline: 1px solid transparent;
position:absolute; 
left:50%;
top: 50%;
transform:translate(-50%,-50%);
transition: 0.6s;
-moz-transition: 0.6s;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
}

These 3 lines of code centers any absolute positioned child element with relation to its parent container (they must have the necessary position:value set) to the vertical and horizontal center of it.

left:50%;
top: 50%;
transform:translate(-50%,-50%);

Another tip would be to include -webkit,-o,-moz for your transition and animation as different browsers might treat them differently.