CODEWITHSUNDEEP
cssmodernizr
Elad Shechter
Elad Shechter

Reputation: 4045

background-attachment:fixed isn't working on iPad

Is there a CSS/Modernizr way, to know if the browser support background-attachment:fixed ?

I'm using background-size & background-attachment together

background-size:cover;
background-attachment:fixed;

And if it doesn't support, it still have an impact on the background-size, and I wants to prevent it.

I prefer a Modernizr way(like a new test).

You can see to issue here the 2 big "parallax" images(scroll down) - with the css class of:
"parallax image-1", "parallax image-2".

http://royalchef-yes.walla.co.il/

Upvotes: 4

Views: 6943

Answers (3)

Shashikant Yadav - Kantbtrue
Shashikant Yadav - Kantbtrue

Reputation: 828

iOS 13 does not support background-attachment: fixed property, you need a fallback function to overcome this. The fallback function needs to check whether the device is iPhone or iPad.

var usrAgent = window.navigator.userAgent;
if (usrAgent.match(/iPad|iPhone/i)) {
    // then do something
}

Upvotes: 0

ZAP
ZAP

Reputation: 21

I have been banging my head against this issue recently also. I have parallax strips in a design and iOS users were reporting that the background images in these a) were horribly distorted, and b) were not parallax. I don't own an iOS device, so I had to work through others to debug this, but it appears that iOS purposefully disables on-scroll updates like parallax effects, and this happens in Chrome as well as Safari.

I was unable to find a way to get parallax backgrounds to work on iOS (although I notice that there are some SquareSpace and other sites that have achieved the effect by swapping them for scaled inline images, which was more complex and time-consuming than I was willing to attempt for something that should just work). So instead I decided to simply disable the parallax effect for iOS by resetting the background-attachment value to scroll for these elements on iOS only. Since Modernizr detects features and not browsers, I had to use this script to detect all iOS devices and then set a CSS style to override the fixed value:

https://gist.github.com/jsoverson/4963116

Then my CSS is:

.device-ios .parallax-strip {
    background-attachment:scroll !important;
}

It's not ideal (it's a device-dependent hack and it downgrades the experience), but given Apple's hostility to parallax on iOS (supposedly because it affects performance), I think I can live with it.

Hope that helps someone else.

Upvotes: 2

Danny Santoro
Danny Santoro

Reputation: 47

I found an answer in another question, so I'm not sure if it works but it doesn't hurt to try :)

#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;}

And put into 

<body><div id="background_wrap"></div></body>

Source: Using background-attachment:fixed in safari on the ipad

Upvotes: -1

Related Questions