javascriptのscroll(IntersectionObserver)の挙動がSafariだけおかしい

このサイトのように、テキストを中央に固定させて、ある程度スクロールしたら文字が次へと切り替わっていくようにしたいのですが、うまくいきません。
https://media.bridal-day.jp/daily/?fbclid=IwAR3eLfRdwJG8PW5rsgWhorQdSkLrSKTIaeHh6ZPGe1vIXzjO8_x8CfHayQY

症状としては、
理想だと、中央に固定してる文字がそのままパッと次の文字に切り替わるのがいいのですが（参考サイトのように）、
Safariだと、スクロールしていくと、切り替わる直前に一瞬だけそのスクロールについていっちゃうんですよね、display:fixed;で固定してるにも関わらず。で次の瞬間パッと中央に瞬間移動で戻ってくるイメージです。
ちなみにchromeだと問題なく理想の挙動をしてくれます。

以下コード

HTML
1<main class="Top">
2
3  <section id="section1" class="section">
4    <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/Top-concept.jpg" alt="コンテンツ１の背景画像">
5    <div class="section1 content active">
6      <h2 class="en">CONCEPT</h2>
7      <p>コンテンツ１です</p>
8      <a class="en more" href="<?php echo $_url['concept']; ?>">VIEW MORE</a>
9    </div>
10  </section>
11
12  <section id="section2" class="section">
13    <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/Top-stay.jpg" alt="コンテンツ２の背景画像">
14    <div class="section2 content">
15      <h2 class="en">STAY</h2>
16      <p>コンテンツ２です</p>
17      <a class="en more" href="<?php echo $_url['concept']; ?>">VIEW MORE</a>
18    </div>
19  </section>
20
21  <section id="section3" class="section">
22    <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/Top-cafe.jpg" alt="コンテンツ３の背景画像">
23    <div class="section3 content">
24      <h2 class="en">CAFE</h2>
25      <p>コンテンツ３です</p>
26      <a class="en more" href="<?php echo $_url['concept']; ?>">VIEW MORE</a>
27    </div>
28  </section>
29</main>
30

css
1.Top{
2  width: calc(100% - 80px);
3  margin: auto;
4  padding-top: 60px;
5  position: relative;
6  & > .section{
7    width: 100%;
8    height: 100%;
9    overflow: hidden;
10    line-height: 0;
11    & > img{
12      width: 100%;
13      height: 100%;
14      object-fit: cover;
15      filter:brightness(50%);
16    }
17    &:first-child > img{
18      filter:brightness(100%);
19    }
20    & .content{
21      text-align: center;
22      @include fixed(50%,50%,auto,auto);
23      transform: translate(50%, -50%);
24      @include flex(center,nowrap);
25      flex-direction: column;
26      align-items: center;
27      display: none;
28      z-index: 3;
29      &.active{
30        display: flex!important;
31      }
32      & *{
33        color: #fff;
34      }
35      & h2{
36        font-size: 40px;
37      }
38      & p{
39        margin-bottom: 10px;
40      }
41      & a.more{
42        padding: 5px 40px;
43        border: #fff 1px solid;
44      }
45    }
46    & .section5.content{
47      & .name{
48        font-size: 18px;
49        letter-spacing: (100em/1000);
50        margin-bottom: 5px;
51        & span{
52          font-size: 14px;
53        }
54      }
55      & address{
56        font-size: 12px;
57      }
58      & .tel{
59        padding: 0;
60        margin-right: 20px;
61        border: none;
62        font-size: 12px;
63      }
64      & .mail{
65        font-size: 12px;
66      }
67      & .gmap{
68        width: 130px;
69        margin-top: 5px;
70        display: inline-block;
71        & img{
72          width: 100%;
73          height: auto;
74        }
75      }
76      & .take{
77        margin-top: 30px;
78        text-align: left;
79        & h3{
80          font-size: 15px;
81          letter-spacing: (100em/1000);
82          &.car:before{
83            content: '';
84            width: 25px;
85            height: 25px;
86            margin-right: 5px;
87            margin-bottom: 5px;
88            background: no-repeat center/contain url(../img/icon-car.svg);
89            vertical-align: middle;
90            display: inline-block;
91          }
92          &.bus:before{
93            content: '';
94            width: 25px;
95            height: 25px;
96            margin-right: 5px;
97            margin-bottom: 5px;
98            background: no-repeat center/contain url(../img/icon-bus.svg);
99            vertical-align: middle;
100            display: inline-block;
101          }
102        }
103        & li, & p{
104          font-size: 12px;
105        }
106      }
107    }
108  }
109}
110

Intersection Observerを使ってスクロールを検知しています。

Javascript
1//スクロールの挙動
2const options = {
3  root: null,
4  rootMargin: "-50% 0px",
5  threshold: 0
6};
7const observer = new IntersectionObserver(doWhenIntersect, options);
8// 交差を監視する要素
9const sections = document.querySelectorAll(".Top .section");
10// それぞれのboxを監視する
11sections.forEach(section => {
12  observer.observe(section);
13});
14//交差時に呼び出す関数
15function doWhenIntersect(entries) {
16  // 交差検知をしたもののなかで、isIntersectingがtrueのDOMを色を変える関数に渡す
17  entries.forEach(entry => {
18    if (entry.isIntersecting) {
19      activateIndex(entry.target);
20    }
21  });
22}
23//メインコンテンツの文字を切り替える
24function activateIndex(element) {
25  // すでにアクティブになっている目次を選択
26  const currentActiveIndex = document.querySelector(".section .active");
27  // すでにアクティブになっているものが0個の時（=null）以外は、activeクラスを除去
28  if (currentActiveIndex !== null) {
29    currentActiveIndex.classList.remove("active");
30  }
31  // 引数で渡されたDOMが飛び先のaタグを選択し、activeクラスを付与
32  const newActiveIndex = document.querySelector(`#${element.id} .${element.id}`);
33  newActiveIndex.classList.add("active");
34}
35