Parallax Home Image not working on phones

[davidd]

Hi,

I spent a long time looking for a great theme for my client's website and found Parallax which works great, except for the main feature it's named after. I hope someone can help me with this. I have some great images for the website here using Parallax. The images weren't responding to changes in the width of the browser until changed background-size from auto to cover.

.home-section-1,
.home-section-3,
.home-section-5 {
	background-attachment: fixed;
	background-color: #fff;
	background-position: 50% 0px;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

Now they work great— on my laptop— by they don't work on a phone where the images are zoomed way into their centers. Also, the parallax feature is completely missing on my new iPhone.

Here is the site
http://emily.viewfarm.com/

Please watch this screen-grabbed video to see what I'm talking about.
http://screencast.com/t/ZxpRpCH53Xe2

Thanks,
David

http://emily.viewfarm.com/

[davidd]

I did find this explanation for iOS issues that might explain the problem. I don't quite understand the solution.
https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/

[Gandt]

Davidd, I found a solution. Yet to be tested on iphone but valid on browser window resize:

The reason the parallax effect works - part of it anyway - is because it is using background-attachment:fixed;

For some reason, one of your media queries has this:

@media only screen and (max-width: 768px)
.home-section-1, .home-section-3, .home-section-5 {
  background-attachment: scroll;

When I change it to 'fixed' instead of 'scroll', it revives the functionality of the parallax effect.

Give it a try, I'd test it on my iphone but I can't since I can only make temporary/local changes to your site with chrome's editor tool.

Regards
G

[davidd]

Hi Gandt,

Thanks for checking out my site. The issue isn't with the parallax effect, which apparently is a CPU hog on small devices, it's with background-size:contain, which apparently doesn't work so well in iOS. I fixed it by using background-size: 200% contain; It made the image the right size and the vertical dimension fit to contain the text. Don't ask me why that worked, but it did!

David

[Gandt]

That's odd, I just checked your site @ my iphone and I don't see the parallax effect kicking in when I go further down the page.

[davidd]

That's right, Gandt. I used the hack above to align the images properly and the background-attachment: scroll to avoid the CPU overload.

[Gandt]

Oh well, in that case then you don't need to use contain, you can just go for background-size:150% auto; for example.

Contain is currently not well supported:

http://caniuse.com/#feat=object-fit

[davidd]

Neat resource. Thanks again for the attention!

[Author]

Posts