Appleのサイトのパララックスが動作しない

Question

Appleのサイトの例えばiPhoneページを閲覧した際に、

https://www.apple.com/jp/iphone-12/

パララックスアニメーションが動作する端末と
パララックスが動作しない端末があるようです。

自分が所有する端末では今まで動作してなかったのですが、
今日、他人の所有する端末で閲覧をした際に、アニメーションすることを初めて知りました。

原因がわからないのですが、
どなたか理由をわかる方いらっしゃいますでしょうか？
切り替え方法があるのか、ないのか。

検証端末はこのような感じです。

---

MacBookPro
MacOS Catalina

• Safari: x
• Firefox: x
• Chrome: x

---

iMac
MacOS Catalina

• Safari: ok
• Firefox: 未確認
• Chrome: ok

---

iPhone　iOS14

• Mobile Safari: x

---

iOSシミュレータ　iOS14

• Mobile Safari: ok

Answer 1

CSSを見てみたところ、以下のメディアクエリがありました。

@media (prefers-reduced-motion)

prefers-reduced-motion は CSS のメディア特性で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。

...
Firefox では、 reduce の要求は以下の場合に尊重されます。
...
macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制
prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN

---

なお、当方の環境でもパララックス効果が表示されませんでしたが、「Windowsにアニメーションを表示する」をオンにしたところ、パララックス効果が表示されました。

Comments

[eternalbeginne]

素晴らしい、これでした！
Macの設定で「視差効果を減らす」にチェックを入れてました。
Webサイトの閲覧で、複数のブラウザに対して影響が出るとは思っていませんでした。

[Lhankor_Mhy]

ご解決されて何よりです。

Animate.css など一部のアニメーションライブラリも、同じ設定で動作しないです。
https://animate.style/

Answer 2

Appleのサイトの仕様では？
原因探ったところでこちらでどうにかできるものでも、するものでもないです。