No parallax on mobile?

Hello,

This is almost certainly similar to another background image issue that the plugin already fixes.

Parallax effects like this often don’t work on mobile by design of the device itself as it uses too much processing power to create the effect.

There is a work around. Can you please try adding this to your Additional CSS in Customizer …

@supports (-webkit-overflow-scrolling: touch) {
    body.cover-header {
        background-size: 0 0;
    }
    body.cover-header:before {
        content: "";
        top: 0; 
        left: 0; 
        bottom: 0;
        right: 0;
        background-image: inherit;
        background-size: cover;
        background-position: inherit;
        background-repeat: inherit;
        position: fixed;
        z-index: -1;
    }
}

… if it works, we’ll add it in as an option.

Oliver

Hi, Oliver, thanks for the reply ??
It didn’t work, though.

Besides, my question was regarding the expected default behavior of the Cover template on twenty-twenty, without plugins. Since it didn’t work on Android, I found your plugin and installed it because I read comments talking about “no parallax on iOS” but it working on Android. Did I misunderstand something? It works neither on iOS nor on Android. That’s the reason I asked here.

Anyway, with the extra CSS nothing changed. No parallax yet on mobile (Android or iOS). If there’s any test you need me doing on my side, count on me. I’ll keep the test site vanilla.

Thanks again

Hi,

OK, my mistake, I’ve looked into this a bit more and using this instead …

@supports (-webkit-overflow-scrolling: touch) {
    .cover-header {
        background-size: 0 0;
    }
    .cover-header:before {
        content: "";
        top: 0; 
        left: 0; 
        bottom: 0;
        right: 0;
        background-image: inherit;
        background-size: cover;
        background-position: inherit;
        background-repeat: inherit;
        position: fixed;
        z-index: -1;
    }
}

… you can force iOS devices to show the parallax effect. However, because of the nature of the way the fix works, the image remains below the tint effect when you scroll up.

So I’m not sure this is going to be possible but I will keep thinking about it.

What you are asking to do is to force mobile devices to do something that they are hard wired designed not to do so it will be a little tricky even if it is possible.

If we get this working to your satisfaction on iOS devices, we may be able to do something similar for Android.

Oliver

Hi Oliver, thanks for the reply.
It “Worked” exactly as you described.

As I said, I really only got interested in getting parallax in mobile after I saw the posts talking abut it “working on Android”. So, where did those comments come from? Did it work for Android in previous builds/versions but now don’t?

I’ve always considered parallax as a no-no on my previous designs, due to the problems for mobile. I just started considering it now, due to the comments I found, thinking that parallax might be something easier/possible now. If it’s not, no problem, I’ll keep designing without them.

I got the notion that it was possible from here: https://www.ads-software.com/support/topic/mobile-parallax-on-setting/

Thanks again, have a nice weekend ??

I’m afraid I don’t have a single Android device to hand in lockdown to test this (I use an iPhone). You could well be right that it may have used to “work” on previous Android builds … I’m afraid I cannot say.

If you want to test the iOS solution on Android you could put this in (without the Media Query above) to see if it has an affect …

body.custom-background, .cover-header {
    background-size: 0 0;
}
body.custom-background:before, .cover-header:before {
    content: "";
    top: 0; 
    left: 0; 
    bottom: 0;
    right: 0;
    background-image: inherit;
    background-size: cover;
    background-position: inherit;
    background-repeat: inherit;
    position: fixed;
    z-index: -1;
}

Don’t leave it in though as it will affect all devices.

If that makes a difference on your Android device then we will look for a media query to detect the device as we did for iOS.

Oliver

Hi again, Oliver, and thanks for the care.
Your code worked on Android the same way it worked on iPhone.
I don’t think it’s a viable solution, though. Mainly because parallax seems to be considered a PROBLEM, so I guess it’s better to stay clear of it.
Also, the transparent background in the body, looks more like a fixed background than a parallax.
So, while I really (really) appreciate your help, the concern with parallax being a problem in mobile, with screen refresh rates and whatnot is a strong motive for me to stay clear of it. “Force feeding” a parallax instead of thinking in alternative economic design solutions… I can’t be that lazy ??

Thanks a lot for your help, let’s cross our fingers and hope for better mobile browser implementations in the future. It’s still a world of “detecting browser version” :/

OK, no problem. I think what we’ll do is implement the Android / iOS parallax “solution” as an option in the next update so that users can decide if they want to force it to work.

And yes, it is a fixed background as was seen in Twenty Seventeen. With Twenty Seventeen we actually implemented a “True Parallax” option for desktops.

I’ll update this thread when we have implemented the option mentioned above.

Oliver

OK, so we’ve pushed the “fix” as an option rather than forced.

If anyone reading this knows the android equivalent CSS media query for “-webkit-overflow-scrolling: touch” then let us know and we will add this in the future.

If anyone wants us to implement a “true parallax” option (as per our Twenty Seventeen plugin), let us know and we’ll get on that too.

Oliver

Just to update this thread, the “True Parallax” option has been developed but is not part of the free plugin, sorry!

Oliver