Запуск MS Edge: зависание при загрузке страницы

Question

Мне нужна помощь в понимании того, почему это происходит.

По сути, я только что запустил новый сайт портфолио.Все отлично работает на Chrome, Safari и FireFox.Но он не работает должным образом в MS Edge (типично).

Моя проблема заключается в том, что в разделе портфолио на сайте у меня есть изображения в сетках, каждое изображение имеет состояние наведения, так что при наведении курсора мышинаведите курсор на изображение, появится название и краткое описание.НО в MS Edge все состояния наведения уже запущены, поэтому все наложения отображаются.Я не имею понятия почему!Вот код:

HTML

        <div class="box box-1">

            <a href="<?php the_field('box-1'); ?>">
                <div class="content">

                    <img src="<?php the_field('box-1-image'); ?>" width="102%" height="102%">

                    <div class="overlay">
                        <h1 class="image-title"><?php the_field('box-1-client'); ?></h2>
                        <h2 class="image-description"><?php the_field('box-1-project'); ?></h1>
                        <div class="overlay-bg"></div>
                    </div>

                </div>
            </a>

        </div>

CSS

.image-title {
z-index: 2;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 32px;
position: absolute;
bottom: 20px;
left: 10%;

transition: .4s ease;
-o-transition: .4s ease;
-ms-transition: .4s ease;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
}

.box:hover .image-title {
bottom: 40px;
transition: .4s ease;
-o-transition: .4s ease;
-ms-transition: .4s ease;
-moz-transition: .4s ease;
-webkit-transition: .4s ease;
}

.image-description {
opacity: 0;
z-index: 2;
color: white;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-size: 18px;
position: absolute;
bottom: 25px;
left: 10%;

-webkit-transition-duration: .4s; /* Safari */
transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
}

.box:hover .image-description {
opacity: 1;
bottom: 35px;
-webkit-transition-duration: .4s; /* Safari */
-webkit-transition-delay: .2s; /* Safari */
transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
transition-delay: .2s;
-o-transition-delay: .2s;
-ms-transition-delay: .2s;
-moz-transition-delay: .2s;
}

.overlay {
opacity: 0;
transition: 0.4s ease;
-o-transition: 0.4s ease;
-ms-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}

.box:hover .overlay {
opacity: 1;
transition: 0.4s ease;
-o-transition: 0.4s ease;
-ms-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}

.box img {
transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
}

.box:hover img {
transform: scale(1.03,1.03)!important;
transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
}

.overlay-bg {
opacity: 0.85;
position: absolute;
bottom: 0;
left: -1px;
right: 0;
background: linear-gradient(#250E3F, #ED306F);
overflow: hidden;
width: 101%;
height: 100%;
}

Вот страница, о которой я говорю:

http://www.alexkiersnowski.com/portfolio/

Ура всем!