Hey there, I recently created a parallax UI using pure CSS. It seems to work fine on Android and desktop browsers, but when I tested it on iOS or iPhone, the parallax effect doesn't seem to be working correctly. I'm not sure why this is happening. Can anyone help me figure this out? Any assistance would be greatly appreciated.
Thank you! You can also view the code here.
Below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<style>
/* General CSS, unrelated to parallax or images */
body {
background: #fff;
color: #222;
font-family: "Source Sans Pro", sans-serif;
}
.code {
font-family: "PT Mono", serif;
color: #090;
}
.writing {
width: 74%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 560px) {
.writing {
width: 96%;
}
}
/* Parallax CSS */
.background-oregon-grapes {
background-image: url("https://marrio-h.github.io/universal-parallax/demo/img/bg3.jpg");
background-size: 100%;
height: 560px;
width: 560px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 767px) {
.background-oregon-grapes {
height: 330px;
width: 330px;
}
}
/* Image CSS for your SVG */
img {
height: 100%;
width: 100%;
}
</style>
<body>
<div class="background-oregon-grapes">
<img src="https://aeoneal.com/imagery/brain-reverse-cutout.svg" />
</div>
<div class="background-oregon-grapes">
<img src="https://aeoneal.com/imagery/brain-reverse-cutout.svg" />
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>