Parallax Effect on Mobiles

OK, I promise to be a "good boy" on the forum now and patiently wait my turn...

One question, though: I'm seeing that my homepage doesn't do the parallax effects when viewed on (iOS) mobiles. Is this intended or can it be fixed?

My site was built from scratch, so not via the Quick Start package.

Thanks!

Hello,

Yes the parallax is disabled form mobile devices (it's intended).

You can change it by adding the following custom css code:

Code: Select all

@media (max-width: 1040px) {
.box.parallax {
    background-attachment: fixed;
}
}


Hi & thanks!

Should I add that code to the template's custom CSS? I tried on my dev site and it had no effect when I viewed on an iPhone...

Yes, please add this code into your override.css file, could you provide your website URL?

Hi Joshua,

The (test) site I tested your code on is "offline", but here's the URL for the live site: http://cineaulac.ch.

Thanks for any and all advice!

On your live site http://cineaulac.ch I can't see mentioned code.

Sorry, I had removed it when it didn't work ... it's in the override.css now (and overrides are activated in the template).

Thanks!

I've checked it again and the parallax effect is disabled by iOS mobile browser.
The reason: Fixed-backgrounds have huge repaint cost and decimate scrolling performance.

Thanks Joshua,
So you're saying it would work on Android devices? Just so I know what to look for... Appreciate the help.

Hi,
I've checked only iOS, but on Android this feature may be also disabled.