I have a solution (pure CSS, no JS) :
HTML
<div class="parallax-container">
<div class="parallax" style="background-image:url('your_picture.jpg')"></div>
</div>
CSS
.parallax-container {
position: relative;
width: 100%;
height: 400px; /* Adjust as you wish */
overflow: hidden;
}
.parallax {
height: inherit;
width: 100%;
clip-path: inset(0 0 0 0);
}
.parallax::before {
content: "";
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background: inherit;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
Why this works:
• Avoids background-attachment: fixed;, which Safari struggles with.
• Uses ::before { position: fixed; } to achieve the same effect.
• Fully compatible with Chrome, Firefox, Edge, and Safari. (and iOS !)
Hope this helps others facing this issue!
Detailed information on my blog: blog.crea64.net
Topic:
Safari & Web
SubTopic:
General
Tags: