[matthew@dreamcell.co.ukParticipant]

I have read various threads on this topic.
The lack of parallax scrolling on mobile is catastrophic for my project, where the client has requested something that looks and feels like Adobe Slate.
In one thread you ask for opinions – so here’s mine.
Please make parallax scrolling enabled for all devices, but selectable.
I think it’s a mistake to make no distinction between a phone and an iPad. iPad users expect the full experience I find.
If there’s an up-to-date customizer fix to enable parallax, please tell us what it is.

[RupokMember]

Hi there,

Thanks for writing in! We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[matthew@dreamcell.co.ukParticipant]

Great… but in the meantime, is there a fix via customizer?

[FriechModerator]

Hi There,

No, there is no option for this on customizer. But a custom css background-attachment: fixed; might do. Would you mind providing us the site URL and point us the background that needs to be fixed on mobile?

Thanks!

[matthew@dreamcell.co.ukParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for updating. I can see the background attachment is fixed so it should work fine and seems fine on my end. You can add this under Custom > CSS in the Customizer to make sure:

.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
  background-attachment: fixed !important;
}

Kindly clear your browser’s cache before checking.

Cheers!

[matthew@dreamcell.co.ukParticipant]

My background image doesn’t appear to be “fixed” on Safari or Google on an iPhone. I have implemented the suggestions above, and cleared my cache.

The additional code for the customizer in your last post seemed to stop the images from scaling correctly, so I have removed it for now.

Am I on a hiding to nothing?

Once again, thank you for your support. Really fantastic.

[ChristopherModerator]

Hi there,

Please try this code :

@media (max-width:979px){

.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
  background-attachment: fixed !important;
  background-position: center center !important;
}
}

Hope that helps.

[matthew@dreamcell.co.ukParticipant]

Hmmm… same result I’m afraid.

The image isn’t fixed and the size doesn’t adjust to the viewing window.

Thank you hough. Any further thuoghts would be most welcome!

[RadModerator]

Hi there,

This can’t be done by just CSS, parallax movement is computed through javascript. And that javascript is disabled as parallax feature as a whole. I understand your point, though, but this time, it’s not yet possible.

Mobile devices have their own standard, multiplied it with each browser standard. And that affects how parallax performs. For example, certain mobile and browser have their address bar auto hide, but not triggering the resize() event, hence leaving a gap space in the parallax. Some cause jumping off the background, and more issues.

resize() event is a very important feature of a browser, it’s the own that triggers re-rendering of elements through javascript. Positioning, responsiveness, and etc. And certain browser has it’s own address bar auto size but not connected to resize().

This is just one of few issues that parallax has on mobile. Though, we’re not closing the door. We’re still finding a best way or solution to implement this. For now, it’s turned off and can’t be enabled by just CSS.

Thanks for understanding.

[Author]

Posts