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

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.

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.

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

@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 :-/

@toufiq : ok thanks, yes could be helpful.

do you know when this bug will be fixed ?

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.

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

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?

OK If you can see with your dev team please.

Because I have found joomla extension where paralax works fine on chrome on apple device.

try those links and scroll the pages, you will see paralax effects on some elements (buttons, blocs, images,...) :

https://smartslider3.com/portfolio/

https://smartslider3.com/blogger-template/

https://smartslider3.com/bakery-page/

https://smartslider3.com/steak-bistro/

I know. But this is the proof that can work. I think you could adjust your tool to make it work.

ok no problem regarding this point.

but is there any css trick you can advice to wait until solved ?

Yes pavel shared CSS to disable paralax effect .. this is ok.

I was just wondering a solution (css trick) to force paralax working also on apple device?

Hi Laurent. Add parallax-section class to the section where you want parallax. Set up overflow x/y to hidden in the section settings. Add Image addon with big image. set up its interaction and turn ON for tablet and mobile. For other addons in this section set position relative, z-index 3

And CSS

.parallax-section :is(.sppb-row-container, .sppb-row-column, .sppb-column, .sppb-column-addons) {
    position: static !important;
}
#IMAGE_ADDON_ID {
    position: absolute;
    inset: 0;
}

Result

Any other methods will be much more complicated and will require JS coding.

hi support team,

do you think this could be improved?