CSS) background-attachment: fixed）スマホだと適用されない

スクロール時の背景固定

スクロールしても背景画像を固定するようにこのサイト
を参考にしてページを作りましたが、パソコン上ではうまくいくのにスマホからだと背景画像が固定されていません。作ったぺーじはこちらです

コード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8" />
5    <title>背景画像固定</title>
6    <link rel="stylesheet" href="styles.css" />
7  </head>
8  <body>
9    <div class="fixed-bg bg01">
10      <h1>Title</h1>
11    </div>
12    <div class="scroll-bg bg-color01">
13      <div class="scroll-bg-content">
14        <p>
15　　　　　　...
16        </p>
17      </div>
18    </div>
19    <div class="fixed-bg bg02"><h1>Title</h1></div>
20    <div class="scroll-bg bg-color02"><p>Contents</p></div>
21  </body>
22</html>
23

CSS
1body, h1, p {
2  margin: 0;
3}
4
5.fixed-bg {
6  min-height: 100vh;
7  background-attachment: fixed;
8  background-size: cover;
9  background-position: center;
10}
11
12.bg01 {
13  background-image: url("images/nagano-The_eruption_of_Mt.Yake-s.jpg");
14  /* margin: 0; */
15}
16
17.bg02 {
18  background-image: url("images/yamagata-_Snow_Monsters_,_Zao_Onsen_Ski_Resort-s.jpg");
19}
20
21.bg-color01 {
22  /* margin: 0; */
23  background-color: black;
24  opacity: 0.8;
25}
26
27.scroll-bg-content p {
28  color: beige;
29  line-height: 2.0;
30  padding: 8% 10%;
31}
32
33.scroll-bg .scroll-bg-content {
34  width: 90%;
35  margin: 0 auto;
36}
37/*# sourceMappingURL=styles.css.map */