CSS滚动捕捉在部分标签中不适用于div

Question

正如标题所示，如果有人能帮助我快速理解为什么我的css滚动快照在此网站上无法正常工作，我正在编码。

这里是网站链接：http://jacobtruax.info/work.html

css看起来像这样：

div.container {
  scroll-snap-type: y mandatory;
}

section.work-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  scroll-snap-align: start;
}

HTML

<div class="container">
  <section class="work-page fn-up" data-client="FN-UP Magazine" data-seen-1="yes">
    <div class="content">
      <img src="lib/fn-up.png">
    </div>
  </section>

  <section class="work-page cameron" data-client="Cameron Tidball-Sciullo" data-seen-2="yes">
    <div class="content">
      <img src="lib/alex.png">
    </div>
  </section>

  <section class="work-page truax" data-client="Jacob Truax" data-seen-3="yes">
    <div class="content">
      <img src="lib/old.png">
    </div>
  </section>

  <section class="work-page romero" data-client="Alexander Romero" data-seen-4="yes">
    <div class="content">
      <img src="lib/alex.png">
    </div>
  </section>
</div>