iPhoneでは「視差効果を減らす」という設定を有効にすると、一部のWebページでtransition効果が正しく機能しない場合があります。これは、特にBootstrapフレームワークを使用したページで顕著になります。
原因は、Bootstrapがユーザーの設定を尊重し、視差効果を減らす設定を有効にしたユーザーに対しては、過度なアニメーションを抑制するためです。しかし、これがBootstrapのtransition効果を無効にしてしまうという副作用を引き起こします。
この問題を解決するためには、BootstrapのSCSS設定ファイルである「_variables.scss」を編集します。このファイル内の$enable-prefers-reduced-motion-media-query: false !default;をfalseに設定することで、Bootstrapは視差効果を減らす設定を無視し、transition効果が正常に動作するようになります。
ただし、この設定変更はユーザーの設定を無視するため、必要な場合にのみ使用し、ユーザーの体験に悪影響を及ぼさないように注意が必要です。