Parallax on mobile

Hi, the parallax effect using images as backgrounds of rows is supposed to work in mobile devices as it does in non mobile browsers? It works perfectly as intended on Mac or PC browsers, but is rendered as a fixed and static image on iPad and iPhone.

Thanks!

Hello there,

I would like to apologize in advance for responding slowly.

Could you please post your URL here so we can have a closer look?

Regards,
Kharis

No problem! :slight_smile: I’ve removed the row’s background image but give me a sec and will set it back.

Done, take a look to http://www.recipecontent.com/, before the contact section there is a row with a background image (1920x1080px) but also your demo site for Moesia Pro looks static (the background images) in my iPhone or iPad, not in my mac where the parallax effect works properly.

Thanks,

Hello there,

Try to apply the following CSS code through the Simple Custom CSS plugin or your child theme’s style.css.

@media screen and (max-width: 1024px) {
	.panel-row-style {
		background-attachment: fixed !important;
		background-position: center top !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		background-size: cover !important;
	}
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis, I’ve added that code to my child’s theme css and the behaviour still is the same using Chrome or Safari in both iPhone and iPad. It works fine (and the css conditional is activated looking at it with firebug) if I do simulate a screen width of less than 1024px using any simulator in my mac (i.e. Firefox Developer Edition) but never works in both actual devices, neither in horizontal or vertical orientation. Actually as I told you before, your own demo of the theme do not work properly on up-to-date iOS devices. Do you have tested this on actual devices or in a simulator in your full-size browser?

Thanks!

Hello there,

> … the behaviour still is the same using Chrome or Safari in both iPhone and iPad.

Try to clear your browser’s cache.

> Actually as I told you before, your own demo of the theme do not work properly on up-to-date iOS devices.

Yes, I’ve tested on my iPhone. It isn’t considered as a bug. It’s intentionally designed like that. But it doesn’t seem to meet your expectation.

Regards,
Kharis

No problem with my expectations, that’s not under discussion, I just need to know id the idea is to have no parallax effect on mobile devices? If it has to be fixed and not parallax like on mobile devices there was no need for you fix, it already was displayed as a static image as I said in my initial question.
My original question was “the parallax effect using images as backgrounds of rows is supposed to work in mobile devices as it does in non mobile browsers?”, so please confirm me if the answer is yes o no, is not about any expectations but it looks horrible depending on the background image used, so if it is the expected behaviour by design, I can just make the background disappear and that’s it, usually to have it centered doesn’t look good.

Thanks Kharis,

Hello there,

No. The reason why the fixed background won’t work on mobile browsers because it has huge repaint cost and decimate scrolling performance. http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios. So, we specified the following lines in style.css rather than telling the mobile browsers to execute fixed background all the time.

@media screen and (max-width: 1024px) {
	.panel-row-style {
		background-attachment: scroll !important;
		background-position: center top !important;
		-webkit-background-size: auto !important;
		-moz-background-size: auto !important;
		background-size: auto !important;
	}
}

Regards,
Kharis

Ok, I’ll make a “conditional” background there by CSS specifying a different or no background at all in those cases in order to avoid to use the same image which is just horrible due to its centered or top fixed positioning.

Thanks!

Thanks Kharis for your support,

But this does not seem to work. You can view my site at www.IntegrationIntoOneness.com and see the fixed background function on desktop and fail with mobile (iphone/ipad). I REALLY REALLY want to have this site actually responsive… fully. I love the theme and its capacities, but it’s strongly designed around these fixed backgrounds to tell a story. Page dividers as images is cheezy. Gotta get this right, I’m embarrassing myself when people see the site on mobile.

Thanks so much for the help!

Hi Kharis,

I cannot manage to get the Pagebuilder row backgrounds to be fixed on mobile. I’ve applied the code above, but that doesn’t look like it would address my issue. Can you follow up with me please?

Many thanks

Hello there,

Sorry, nothing we can do because there is limitation on mobile browser. Please refer to my previous reply here.

Regards,
Kharis

I ran into this issue myself, and have been happy with this modification to Kharis’ suggestion. Your mileage may vary.

@media screen and (max-width: 780px) {
    .panel-row-style {
        background-attachment: scroll !important;
        background-position: center center !important;
    }
}

This way you still see as much of the image as possible. I also gave my image rows a fixed 400px height at larger sizes, and dropped it to 200px at this size.

Please. Has anyone got the parallax effect on mobile devices?

The following website works perfectly and the result on mobile devices is very nice.

Hello @dgilgil,

What device did you use to view that site on?

Regards,
Kharis

Hi Kharis - not the OP but also seeking an answer to this (using Sydney theme).
I view that site (http://certificacionenerxetica.es/) with Chrome on Android 6 and indeed I do get the desired parallax.

Any way to get it with my theme?

Thanks!

I’ll be more precise here - I hope I’m aligned with OP’s intent - let me know if I should take my question to a separate thread:
My page has a background photo and some foreground items, which produce a very nice parallax effect. When using Chrome on Windows, I can reduce the viewing area at will - to a size way narrower than my mobile, for example - and I still get a perfect parallax (nicely reduced to the visible area size). Moreover, Chrome now has a feature to actually emulate all kinds of phones and tablets for you (within the Inspect feature) - very nice. No matter which phone I emulate (Nexus 6P, iPhone 5, iPhone 6…) I get a perfectly played parallax.

Until I go to an actual mobile phone. There, no parallax. Everything scrolls in sync - foreground and background.

This is weird (as I don’t understand the media query that would account for this difference) and I’m quite at loss as to how I can fix it.

> let me know if I should take my question to a separate thread:

Yes, please open your new separate thread.

Regards,
Kharis

Hello Kharis! Where are we at with this issue now? Based on seeing many sites with fixed background images on mobile we must now have an answer. Can we publish the fix in this thread?

Looking forward to it and appreciative for your work!