如何在此布局中停止Safari重叠元素？

Question

我的div在此页面上以一种奇怪的方式重叠：https://www.mannebacherkaese.com/

我发现问题是我使用一些CSS在“联系人”上平滑滚动的方式

请参阅下面的我使用的系统。

<div id="universal-container">
  <div id="navigation">
    <a href="#section-1">section 1</a>
    <a href="#section-2">section 2</a>
  </div>

  <div id="section-1">
    <h1> I am section 1 </h1>
  </div>

  <div id="section-2">
    <h1> I am section 2 </h1>
  </div>
</div

#navigation {
  font-size: 30px;
  margin: 2rem 0;
}
#universal-container {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#section-1 {
 width: 100%;
 min-height: 1000px;
 background-color: yellow;
}

#section-2 {
  width: 100%;
  min-height: 1000px;
  background-color: red;
}

它在chrome和mozilla中都可以正常工作，但野生动物园会覆盖元素...

如果我从通用容器中删除内容的包装，则它不会弄乱布局，但是显然它不再滚动了……

我该怎么办？

谢谢！