Image Paralax does not appear apple device (IOS)

Navigation
1

Good afternoon guys.

I developed a site for my girlfriend, and when I open the same on an iphone, the paralax image does not appear, it gets blurred.

Android, notebook and desktop devices are running normal.

www.anagasparini.com.br

    
asked by anonymous 21.03.2018 / 18:04

1 answer

0

The problem is because background-attachment: fixed; is not supported in Safari (I've already addressed the subject in this answer ) . This is why the image is full-size, ignoring background-size: cover; .

What you can do is add a script to leave the background fixed. The result in iOS Safari may not be 100%, but it resolves the image issue.

The script is this: 

document.addEventListener("scroll", function(){
   document.querySelector("#paralax").style.backgroundPosition = 'center '+window.pageYOffset+'px';
});

And in CSS, delete background-attachment: fixed; .

See what's on the iPhone 3GS:

    
22.03.2018 / 00:19
Method to calculate development time of entity-relationship diagram [closed] Pass component to child