1
Good afternoon, you guys.
I developed a website for my girlfriend, and when I open it on an iphone, the image paralax does not appear, it gets blurry.
Android devices, notebook and Desktop is running normal.
www.anagasparini.com.br
1 answer
0
The problem is because the background-attachment: fixed; has no support in Safari (already taken care of the subject in this answer). That’s why the image stays in full size, ignoring the background-size: cover;.
What you can do is add a script to keep the background fixed. The result in iOS Safari may not be 100%, but it solves the image issue.
The script is this:
document.addEventListener("scroll", function(){
document.querySelector("#paralax").style.backgroundPosition = 'center '+window.pageYOffset+'px';
});
And in CSS, delete the background-attachment: fixed;.
See how it looks on iPhone 3GS:
Browser other questions tagged css ios bootstrap website apple
You are not signed in. Login or sign up in order to post.