I am having troubles getting parallax scrolling to work properly. I have tried using the Hero widget, the Image widget, and just a plain row. When the site is in desktop mode the parallax rows work properly and look great. When I switch over to a mobile view it breaks. The images act like they are fixed dimensions, and it the page scrolls around it. It is like the images are doing their parallax scrolling, but they are on top of everything else.
I am using a child theme of Shapely and I don’t have anything fancy going on with CSS.
Any thoughts on this matter?
Hi Codyroche,
Do you have a public URL where we can take a look at what’s going on?
To clarify, are you using a fixed or a parallax background (https://siteorigin.com/fixed-vs-parallax-background-images/)? Please note that fixed background images sadly will not work on mobile devices due to technical limitations (read: they’re purposefully disabled by Google and Apple).
It is publicly hosted but still under development so the whole site is restricted access. After researching the link you gave me, I am using a parallax background image. Although, I do like the way the fixed background looks. Why is the fixed background disabled via Google and Apple? Does it have a graceful fallback?
So I have just been playing with this trying to make it work again. I went into the settings and reset the “Limit Parallax Motion” to 0 and it started functioning on mobile platforms again. I had set this value to 75 to achieve the look I wanted on the desktop platform. Is that too high of a number to work on the mobile platform? Perhaps I don’t fully understand this setting.
Hi Cody,
Why is the fixed background disabled via Google and Apple?/blockquote>
Performance and battery concerns. I personally don’t agree with fixed backgrounds being disabled but sadly we can’t override it.
Yes. The image will revert to the standard scrolling display that images use by default.
The image you’re using may not be able to support that value on mobile (due to the additional height of the parallax on mobile), but there’s nothing specifically disabling the parallax if the Limit Parallax Motion over a certain value.
Basically, the Limit Parallax Motion setting will allow you to enforce a maximum value on the amount that the image will be scrolled when the parallax occurs. Generally, the higher the value the more the image will scroll when the page scrolled. 0 will have SiteOrigin page Builder work out the ideal value bsasedfo n the height of the image.