Parallax and iOS

Does anyone else face issues where they cant get parallax to work on iOS? But it works fine on pc, mac or android?

Parallax can be implemented in a million different ways. What’s your code? What’s not working? And which browser on iOS (assuming you’re talking about a web app)?

I have tried on safari and chrome on iOS, however I am using an old iphone with iOS 11.1.

I am trying to use this guide, without specifying the @media query for parallax.
https://www.w3schools.com/howto/howto_css_parallax.asp

It specifically says that this might not work on mobile devices but I have seen other websites use parallax on phone, so want to figure out how it can be done.

Looks like iOS Safari latest (v13) supports “local but not fixed” for the background-attachment property.

I think iOS Chrome uses the same rendering engine, because Apple doesn’t allow other browser rendering engines on iOS, so it probably suffers from the same problem.

Perhaps try something like this instead:

CSS
body, html {
  margin: 0;
}

.parallax {
  position: relative;
}

.parallax-section {
  background: #fff;
  padding: 20px;
  margin: 200px 0;

  position: relative;
}

.parallax::before {
  content: "";
  background-image: url("img_parallax.jpg");

  position: fixed;

  height: 100vh; 
  width: 100vw;
  z-index: -1;
  top: 0;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
Markup
<div class="parallax" >
  <div class="parallax-section">section 1</div>

  <div class="parallax-section">section 2</div>

  <div class="parallax-section">section 3</div>
</div>

Works similarly but uses a ::before pseudo-element with position: fixed and z-index: -1 instead of background-attachment.

Note that this is actually a fixed-background effect, not a true parallax effect. Reposting from an old thread: