BUG : Parralax effect does not work on apple devices - Forum | JoomShaper
Solved SP Page Builder

BUG : Parralax effect does not work on apple devices

Asked by Laurent 3 years ago Last activity 2 years ago

Hi,

I have a section with a background not fixed (with parralax effect).

  • works fine on androir devices with chrome or firefox => image is correctly displayed => see here https://prnt.sc/b3wf75JvJDKw

  • does not work from all apple devices (iPhone etc...) with chrome or firefox or safari => image is NOT correctly displayed => see here https://prnt.sc/8dwoevEPfZOM

See Hidden Content area to test live site.

This is a big problem for us because some customers want parralax effect.

Could you please provide a solution?

Thanks
L.

Accepted answer

Marked as the solution
Pavel
2 years ago

Hi.

I don't think this can be fixed and I think this question should be addressed to Apple. For Apple devices, there are only workarounds not only for SPBB, but in general in HTML/ CSS, similar to that I described above.

If you google the subject, then see this.

Laurent Asked this
2 years ago

ok thanks for the feedback
Have a good day

16 more replies

Oldest first Newest first Most helpful
Toufiq Senior Staff
3 years ago

Hi there,

I appreciate you reaching out. I sincerely apologize for this oversight. Will you please provide me the Joomla administrator access to check the issue? I will check & get back to you soon. 

-Thanks

Laurent Asked this
3 years ago

the problem is not coming from my website, but from SP page builder.
I think you can from your own demo website.

but, after all, I have added credentials in Hidden Content area.

Toufiq Senior Staff
3 years ago

Thanks for quick response. I have shared your credential to our developer team. I will get back to you soon. Thanks

Pavel
3 years ago

Hi Laurent.

This is not SPPB issue, but an issue with support of background-attachment: fixed; on devices with iOS. Parallax used in SPPB is based on this property. Therefore, you can disable this for all mobile devices using CSS Media Queries or only for iOS devices using CSS Media Queries for iOS.

Something like

@media (max-width: 991.98px) {
    .your-section-class {
        background-attachment: scroll !important;
        background-position: center !important;
    }
}

Or looking for third-party parallax plugins with iOS support.

But in general, any parallax effects on mobile devices are redundant and lead to poor page speed.

Toufiq Senior Staff
3 years ago

@Pavel I know the solution. But, We are trying to provide permanent solution. By the way, Thanks

Pavel
3 years ago

...Or workaround by using Image addon with interactions settings + some CSS as a background image instead of section bg parallax

Laurent Asked this
3 years ago

yes also..but many code and customisation for nothing..
you know what I mean ;-)

Laurent Asked this
3 years ago

@pavel : thanks for the info, yes could be a solution.
about page loading, yes I know but sometimes the customer insists on having this effect :-/

Laurent Asked this
3 years ago

@toufiq : ok thanks, yes could be helpful.

Laurent Asked this
3 years ago

do you know when this bug will be fixed ?

Toufiq Senior Staff
3 years ago

Today, the developer team informed me that this issue is related to the browser. Please continue using custom CSS until the browser adds support for these properties. Thank you for your understanding.

Laurent Asked this
3 years ago

Ok so what is your advice about CSS code to use to make paralax working on apple device?

Toufiq Senior Staff
3 years ago

Apple device browser doesn't have feature to use the parallax using css property. You have to turn off the parallax. Thanks

Laurent Asked this
3 years ago

ok for Apple device browser like safari => understood.

but the problem is the same if you use Google Chrome on Apple device.

So what is the css to use?

Toufiq Senior Staff
3 years ago

Same for other browser also. I forget to share it.

Log in to reply.