When the “Reduce parallax effect” setting is enabled on the iPhone, the transition effect may not function properly on some web pages. This is especially noticeable on pages using the Bootstrap framework.
The cause is that Bootstrap respects the user’s settings and suppresses excessive animation for users who have enabled the setting to reduce parallax effects. However, this causes the side effect of disabling Bootstrap’s transition effect.
To solve this problem, edit Bootstrap’s SCSS configuration file, “_variables.scss”. By setting $enable-prefers-reduced-motion-media-query: false !default; to false in this file, Bootstrap will ignore the setting to reduce parallax effects and the transition effect will work correctly This setting change, however, will ignore the user’s setting.
However, since this setting change ignores user preferences, care should be taken to ensure that it is used only when necessary and does not adversely affect the user experience.