Parallax ウェブだけでなく をスマホでも表示したい

Question

ウェブ上で表示されるparallaxをスマホでも表示したいです。
ですが、スマホでは画像すら表示されない状態です。

ウェブでは問題なく表示され、背景の画像をずらす効果が出ています。
これらをスマホでも表示したいです。

<div class="parallax1"></div>

.parallax1 {
   position: relative;
   background-image: url(/images/bigstock12.jpg);
   height: 30%;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

Comments

[m.ts10806]

HTMLはdoctype宣言も含めせてすべて提示いただけますか？
CSSもできればすべて。
提示内容だけでは再現確認とれませんので。
あと現象確認された機種やブラウザの種類も質問本文に追記してください

[CHERRY]

JavaScript は、使用せずに作成されているのでしょうか？
JavaScript を使っているのであれば、関連する内容も記載をしてください。

[StanS.]

Javascriptは使用していません。

[x_x]

> ウェブでは
ウェブではない何かで見ているということでしょうか？

Answer 1

こちらのプロパティがiOSやandroidに対応していないようです。

background-attachment: fixed;

参考：
https://caniuse.com/#search=background-attachment

なので、別の方法でbackground-attachment: fixed;の動きを再現するということになります。
雑で申し訳ありませんが…???? 以下がDEMOです。

• bodyの疑似要素に背景を敷いて、その上にコンテンツをかぶせるとか。

DEMO:
https://codesandbox.io/s/84lxnv1r9j

<h1>Parallax</h1>
<section>
  <h2>heading</h2>
  <p>body</p> <!-- スクロールするくらい並べる -->
</section>
<section>
  <h2>heading</h2>
  <p>body</p> <!-- スクロールするくらい並べる -->
</section>

body {
  margin: 0;
}
body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("https://picsum.photos/1920/1080");
  z-index: -1;
}
section:nth-of-type(n + 2) {
  margin-top: 300px;
}
h1,
h2,
p {
  background-color: #fff;
  margin: 0;
}

• jsでスクロール量を取得してそれをbackground-positionに当てはめるとか。

DEMO:
https://codesandbox.io/s/k96qzzp7wv

<p>body</p> <!-- スクロールするくらい並べる -->
<div class="parallax1"></div>
<p>body</p> <!-- スクロールするくらい並べる -->

.parallax1 {
  position: relative;
  background-image: url("https://picsum.photos/1920/1080");
  height: 400px;
  background-size: auto;
  background-repeat: no-repeat;
}

const $target = $(".parallax1");
const targetHeight = $(".parallax1").height();
const targetTop = $(".parallax1").offset().top;
const targetBottom = targetTop + targetHeight;
const windowHeight = $(window).height();

$(() => {
  displayInit();
  $(window).on("scroll", () => {
    const scrollTop = $(window).scrollTop();
    const scrollBottom = scrollTop + windowHeight;
    if (scrollBottom > targetTop && scrollTop < targetBottom) {
      //画像が画面内に入ったとき
      const bgPosition = scrollBottom - targetTop;
      $target.css(`background-position`, `50% ${100 - bgPosition / 10}%`);
    }
  });
});

// 初期表示
const displayInit = () => {
  const bgPosition = windowHeight - targetTop;
  $target.css(`background-position`, `50% ${100 - bgPosition / 10}%`);
};

※ jQuery使っちゃってます
※ ES6の記法です

他にもアイディア次第でいろいろ解決方法があるかもしれません。
個人的にはjsでやるのが好きです????