Awaiting an answer SP Page Builder

SPPB Row Background Image Parallax Effect not working on iPad

Asked by TheBearded 4 years ago Last activity 3 years ago

Hello,

on my website frontpage, in SP Page Builder Pro I have created rows for desktop view (hidden on mobile, but visible on tablet) and rows for mobile view (hidden on desktop and tablet). The backgrounds on the desktop version use the parallax row effect (with background size: "cover" and background attachment: "scroll" settings).

On my iPad Pro in landscape mode, the background is extremely blurred / zoomed in. It looks normal in the fronteditor, but not on my device.

There seems to be an issue with the parallax effect - when I turn it off, the pictures look better on tablet, but bad on desktop.
I would expect the behaviour on the tablet the same as on the desktop, with a working parallax mode in landscape mode.

Please see the screenshots for more detail:
iPad Pro (wrong): https://ibb.co/L1Pm5jh
Dekstop PC: (correct) https://ibb.co/k6N2VpN

Please advise.

Thanks, Ben

13 replies

Ofi Khan Staff

4 years ago

Hello TheBearded

Please follow this documentation and apply the settings on your iPad Pro.

Best regards

TheBearded Asked this

4 years ago

Hell Ofi,

thanks for your response. Unfortunately, this does not solve the issue.

I see wrong scaling of background pictures in landscape mode. Also SPPB seems not to recognize the iPad as a tablet - it displays desktop rows, which might also be part of this issue.

Please kindly provide further assistance to solve this issue.

Thanks and best regards,
Ben

Ofi Khan Staff

4 years ago

Okay, I would like to investigate the issue further. Please share the page link to check. If you want to share privately, then share in the hidden content box.

TheBearded Asked this

4 years ago

Hello Ofi,

I have provided login data in the hidden content box. The whole page is password protected as it is still under construction, I have provided all necessary login data in the hidden content area.

Thanks and best regards,
Ben

TheBearded Asked this

4 years ago

Hello Ofi,

were you able to make progress with this issue?

Thanks for a wuick update and best regards,
Ben

TheBearded Asked this

4 years ago

Hello,

may I kindly ask if there has been any progress on this issue? Please let me know how this issue can be fixed.

Thanks and best regards,
Ben

Ofi Khan Staff

4 years ago

Apology for the delay. Please check this page (on the hidden content) and let me know if your issue is solved or not.

TheBearded Asked this

4 years ago · edited

Hello Ofi,

thanks for looking into the issue. Unfortunately the page looks the same on the iPad as before.

It still looks like this: https://imgbb.com/L1Pm5jh

Foir me it also looks like as the iPad would not be recognized as a tablet by SPPB, it displays the desktop version of the content...

Could you kindly follow up again? Thank you!

Best regards,
Ben

Ofi Khan Staff

4 years ago

The page is displayed according to the screen resolution. If it is bigger than the usual tablet screen resolution, then you might have seen the desktop view. Please explain it more. Check it with different browsers on the iPad. If possible, then share your iPad model too.

TheBearded Asked this

4 years ago

The device is an iPad Pro 2018 with 10.5 inch screen (resolution 2224 x 1668 Pixel).

In landscape mode, it definitely shows the desktop version of the page - in portrait mode it shows the tablet view. I also checked this in Chrome on the iPad, the behaviour is the same.

Is it possible to change the SPPB behaviour that it shows the tablet view on a tablet? I would not consider the resolution of a four year old tablet as very unusual.

Besides that, the original problem with the parallax scroll effect and the wrong scaling of the background image is also still open. For the productive page I now had to remove the parallax effect, but I would love to use it and display it also on desktop, tablet and mobile.

TheBearded Asked this

3 years ago

Unfortunately, one year later this issue still persists.

SPPB somehow seems to recognize the iPad Pro 10,5" in landscape mode as a "desktop" and shows wrong scaling of images.

Please investigate in fixing this, it is a massive issue.

pepperstreet

3 years ago · edited

This is a general, well-known issue and limitation on iOS devices/Safari browsers.
Basically the involved CSS properties render the background for the entire screen height. Although it should take the height/width of the container into account... which holds the actual background image.

Probably this can only be fixed by a constant re-calculation of that container and the image dimensions.
Back in the days, even a javascript solution was no real option, because Apple prevented the execution during touch/scroll events. The result was a total freeze of javascript or a very choppy jerky movement.

After many years, the newer iOS/browser versions seem to allow more scripting and update during those touch events.

@Joomshaper
I would like to encourage the Joomshaper Devs to investigate this further. Other companies did find some javascript workarounds! For instance "Yootheme's UIKIT". I have also seen a working effect on an "RS Joomla" template demo. I also remember "Stellar.JS + Scrollability", but it is no longer maintained.
In 2022, I found the project "Universal-Parallax", looks very promising! MIT license ;)
https://github.com/marrio-h/universal-parallax

Apart from Javascript, there might be even new CSS tricks to make this work...
Hope this helps to find some resources for inspiration ;)

Ofi Khan Staff

3 years ago

Thanks for your feedback on this. I think parallax issue is an iPadOS issue and it might be altered by Custom CSS or Custom JavaScript. You have to find the solution for you. For the resolution, iPad might seem like desktop which is quite normal. You may check websites view like desktop on iPad. So, considering your suggestion, if we change the resolution or use Custom JavaScript only for specific device, it might create issue on another thing. The simpler is the better. We will keep the customization option open to you.

pepperstreet

3 years ago

Sure, actually you are not to blame at all. Technically ;)
But you are also providing a feature and parameter in your products UI, which people make use of. Many users might think: "Hey, there is a Parallax feature, click it and enable it... If it is there, it should work everywhere".
Since you also provide extensive animation features in your pagebuilder product, I would also expect a working solution for a "simple" background effect.
Please, consider my previous comment and examples. It seems possible ;)