0

I've been developing a website and have come across an issue on Safari on an Iphone 8 plus. I have used background-attachment: fixed; to produce a parallax effect as a result it currently looks like this on a chrome browser on android looks like this:

How it looks on chrome mobile android

which is what I want however when testing it on a family members Iphone 8 plus the image does not give the parallax effect when scrolling and instead zooms in heavily. Is there anyway to fix this? I should note when testing on an Iphone XR the problem does not exist. My assumption is the browser or IOS might be outdated on the Iphone 8 plus which is why the issue occurs but I am not sure and just want to know if there is a fix to this issue. Here's my code:

div.image-banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://images.unsplash.com/photo-1564767655658-4e6b365884ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
  position: relative;
  height: 100vh;
  width: 100vw;
  background-position: center;
  background-repeat: norepeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
Luis Guerrero
  • 1
  • 1
  • Some mobile browsers turn off `background-attachment`, probably because it can be a bit annoying on a tiny screen. Mabye you could try putting a `fixed` element as the background instead? – corn on the cob Aug 18 '20 at 07:44
  • https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios – Ehsan Aug 18 '20 at 07:44

0 Answers0