[css] scroll-snapが機能しない

起きていること

CSSのスクロールスナップを使おうとしているのですが機能しません。

環境

OS Mojave
Chrome 79.0.3945.130
localhost

内容

scroll-typeをmandatoryに、snap-alignをstartにしているので、それぞれのsectionの始まり部分でスナップしてほしいのですが、スナップが機能せず通常のスクロールになってしまいます。

scroll-snap not working で検索して出た結果のページは全て見ましたが、記述に間違っている点はなさそうで、もしお気付きのことがあればご意見いただきたいです🙇‍♂️

コード

HTML
1<template lang="pug">
2.movie
3  section.contents.contents-01
4    |01
5  section.contents.contents-02
6    |02
7  section.contents.contents-03
8    |03
9  section.contents.contents-04
10    |04
11  section.contents.contents-05
12    |05
13</template>

CSS
1.movie
2  width 100%
3  height 100%
4  scroll-snap-type mandatory
5  scroll-snap-points-y repeat(100vh)
6  scroll-snap-type y mandatory
7  -webkit-overflow-scrolling touch
8  overflow-scrolling touch
9  overflow scroll
10
11  section.contents
12    width 100%
13    height 100vh
14    padding 10%
15    scroll-snap-align start
16    position relative
17
18  .contents-01
19    background-color blue
20  .contents-02
21    background-color white
22  .contents-03
23    background-color blue
24  .contents-04
25    background-color white
26  .contents-05
27    background-color blue