IEにてズームするアニメーションがナビバーと大きく重なる

ズームして画像が切り替わるアニメーションを実装しましたが、IEのみ画像の上部分が大きく重なって（最初から拡大されている？）しまいます。
その他ブラウザは元の大きさから始まります。
heightの指定など変えてみましたが原因わかりませんでした。
修正方法わかる方お力添えよろしくお願いいたします。

HTML
1コード
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link
8      rel="stylesheet"
9      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
10    />
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
13    <!-- ファーストビューのズームフェード -->
14    <link
15      rel="stylesheet"
16      href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"
17    />
18    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
19    <!-- fontawesome -->
20    <link
21      rel="stylesheet"
22      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
23      integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI="
24      crossorigin="anonymous"
25    />
26    <title>SHOP</title>
27    <link rel="stylesheet" href="css/style.css" />
28  </head>
29  <body data-spy="scroll" data-target="#navbarResponsive">
30    <!--スクロールした所がアクティブになる-->
31    <!-- navimenu -->
32    <nav class="navbar navbar-expand-md navbar-light bg-white sticky-top">
33      <div class="container-fluid">
34        <!--左右に余白なし-->
35        <div class="logo-wrapper">
36          <a href="#" class="logo anchorlink">
37            <img src="img/ロゴ" class="logo-img" alt="logo" />
38          </a>
39          <div class="logo-text">
40            RECRUIT
41          </div>
42          <!-- /.logo-text -->
43        </div>
44        <button
45          class="navbar-toggler"
46          type="button"
47          data-toggle="collapse"
48          data-target="#navbarResponsive"
49        >
50          <span class="navbar-toggler-icon"></span>
51        </button>
52        <div class="collapse navbar-collapse" id="navbarResponsive">
53          <ul class="navbar-nav ml-auto">
54            <li class="nav-item active">
55              <a href="#" class="nav-link">TOP</a>
56            </li>
57            <li class="nav-item">
58              <a href="#service" class="nav-link anchorlink">SERIVCE</a>
59            </li>
60            <li class="nav-item">
61              <a href="#service" class="nav-link anchorlink">SERIVCE</a>
62            </li>
63            <li class="nav-item">
64              <a href="#service" class="nav-link anchorlink">SERIVCE</a>
65            </li>
66            <li class="nav-item">
67              <a href="#service" class="nav-link anchorlink">SERIVCE</a>
68            </li>
69            <li class="nav-item">
70              <a href="#service" class="nav-link anchorlink">SERIVCE</a>
71            </li>
72            <li class="nav-item sns-menu">
73              <a class="nav-link">LINK</a>
74              <ul class="sns">
75                <li>
76                  <a href="#" target="_blank" class="twitter"
77                    ><i class="fab fa-twitter"></i
78                  ></a>
79                </li>
80                <!-- /.twitter -->
81                <li>
82                  <a href="#" target="_blank" class="facebook"
83                    ><i class="fab fa-facebook-square"></i
84                  ></a>
85                </li>
86                <!-- /.facebook -->
87                <li>
88                  <a href="#" target="_blank" class="instagram"
89                    ><i class="fab fa-instagram"></i
90                  ></a>
91                </li>
92                <!-- /.instagram -->
93              </ul>
94            </li>
95          </ul>
96        </div>
97      </div>
98    </nav>
99    <header class="header">
100      <!-- image slider -->
101      <div class="swiper-container">
102        <div class="swiper-wrapper">
103          <!-- 背景画像１ -->
104          <div class="swiper-slide">
105            <div
106              class="slide-img"
107              style="background-image: url('img/画像1');"
108            ></div>
109          </div>
110          <!-- 背景画像２ -->
111          <div class="swiper-slide">
112            <div
113              class="slide-img"
114              style="
115                background-image: url('img/画像2');
116              "
117            ></div>
118          </div>
119          <div class="top-title-content">
120            <h1 class="top-title">
121              テキスト
122            </h1>
123            <!-- /.top-title -->
124            <h2 class="top-sub1">テキスト</h2>
125            <h2 class="top-sub2">テキスト</h2>
126          </div>
127        </div>
128      </div>
129    </header>
130    <!-- Javascript -->
131    <script src="js/script.js"></script>
132  </body>
133</html>
134

SCSS
1コード
2
3$green: #8bfac3;
4$blue: #7eacf5;
5*,
6*::before,
7*::after {
8  box-sizing: border-box;
9}
10
11html,
12body {
13  margin: 0;
14  padding: 0;
15}
16
17html {
18  /* ルートのフォントサイズを10pxに設定しておく */
19  font-size: 62.5%;
20}
21
22body {
23  -moz-osx-font-smoothing: grayscale;
24  -webkit-font-smoothing: antialiased;
25  background: #fff;
26  color: #333;
27  font-size: 1.6em; /* ルートのフォントサイズを1.6em（16pxと同等のサイズ）に設定 */
28  font-weight: 500;
29  line-height: 1.6;
30  overflow-x: hidden;
31}
32
33h1 {
34  font-size: 36px;
35  font-weight: bold;
36
37}
38h2 {
39  font-size: 24px;
40
41}
42
43article,
44aside,
45footer,
46header,
47nav,
48section,
49main {
50  display: block;
51}
52
53ul,
54li,
55img{
56  border: 0;
57  margin: 0;
58  padding: 0;
59}
60
61a {
62  color: inherit;
63  outline: none;
64  transition: all 0.6s ease;
65  text-decoration: none;
66  &:hover {
67    text-decoration: none;
68    color: inherit;
69  }
70}
71
72a:hover {
73  transition: all 0.6s ease;
74}
75
76img {
77  border: none;
78  height: auto;
79  max-width: 100%;
80  vertical-align: top;
81}
82
83ul,
84li
85  {
86  list-style: none;
87}
88
89.content-wrapper {
90  width: 100%;
91  margin: 0 auto;
92  max-width: 1500px;
93}
94.inner {
95  max-width: 1100px;
96  margin: 0 auto;
97}
98.title {
99  text-align: center;
100}
101.subtitle {
102  text-align: center;
103  font-size: 3.6rem;
104  margin-top: 16px;
105  font-weight: bold;
106
107}
108.title-green {
109  background-color: $green;
110  padding-top: 30px;
111  padding-bottom: 30px;
112}
113.title-blue {
114  background-color: $blue;
115  padding-top: 30px;
116  padding-bottom: 30px;
117}
118
119/*==========================
120        NAVBAR
121============================*/
122.container-fluid {
123  padding: 0;
124}
125nav {
126  height: 80px;
127
128}
129.navbar {
130  padding-right: 0;
131  padding-left: 0;
132
133}
134.nav-link {
135  margin-right: 30px;
136}
137.navbar-toggler-icon {
138  width: 30px;
139  height: 30px;
140}
141.logo-wrapper {
142  text-align: center;
143  margin-left: 5%;
144}
145.logo-text {
146  font-size: 1.4rem;
147  letter-spacing: 9.8px;
148}
149.sns-menu {
150  position: relative;
151  cursor: pointer;
152}
153.sns {
154  position: absolute;
155  top: 56px;
156  background-color: #fff;
157  display: none;
158}
159.fab {
160  font-size: 3rem;
161  margin-top: 10px;
162  margin-left: 10px;
163  margin-right: 10px;
164}
165.fa-twitter {
166  color: #55acee;
167}
168.fa-facebook-square {
169  color: #1d7fff;
170}
171.fa-instagram {
172  color: #8b09b2;
173}
174/*===========================
175        HOME
176=============================*/
177/* ズームフェード */
178@-webkit-keyframes zoomUp {
179  0% {
180    transform: scale(1);
181  }
182  100% {
183    transform: scale(1.15);
184  }
185}
186
187@keyframes zoomUp {
188  //1.15倍させる指定
189  0% {
190    transform: scale(1);
191  }
192  100% {
193    transform: scale(1.15);
194  }
195}
196
197.swiper-slide-active .slide-img,
198.swiper-slide-duplicate-active .slide-img,
199.swiper-slide-prev .slide-img {
200  //12秒かけて拡大させる
201  -webkit-animation: zoomUp 12s linear 0s;
202  animation: zoomUp 12s linear 0s;
203  -webkit-animation-fill-mode: both;
204  animation-fill-mode: both;
205}
206
207.slide-img {
208  background-size: cover;
209  background-position: center center; //背景画像は中央を軸に表示させる
210  height: 600px; //600pxの高さで表示させる
211
212}
213
214.top-title-content {
215  width: 100%;
216  color: #fff;
217  text-align: center;
218  position: absolute;
219  z-index: 10;
220  top: 50%;
221  left: 50%;
222  transform: translateX(-50%) translateY(-50%);
223}
224.top-title {
225  font-size: 6rem;
226  font-family: "Noto Sans Japanese", sans-serif;
227  font-weight: 700;
228  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
229
230}
231.top-sub1,
232.top-sub2 {
233  font-weight: bold;
234  margin-top: 30px;
235  font-size: 5rem;
236  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
237}
238