Make parallax work on iOS without background-attachment:fixed

Question

Does anyone know if there is a reasonable way to make this parallax background scrolling effect work on iOS devices? Here is the page I am working on. http://districtdentalontheouachita.com/new/

Right now all I am doing to achieve this effect is to used background-attachment: fixed;

Here is the css for my sections

.section1 {
  width:100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-image: url("images/dental1.jpg");
  background-attachment:fixed;
}

The client really wants this effect but I cant make it work on iOS...

ouflak · Accepted Answer · 2021-09-22 16:43:11Z

2

Use position: fixed instead and then some placement adjustments.

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

This, with some z-index, could get the effect on any device. It is unfortunate that ios does not work with background-attachment: fixed but there is always another way.

edited Sep 22, 2021 at 16:43

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Sep 22, 2021 at 14:09

nicholas Angelo

212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Make parallax work on iOS without background-attachment:fixed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related