Fix Parallax Scroll

[johnnyp14]

Hello support

I’d like to use the parallax scroll effect where the image doesn’t move. I’m using the fix previously provided in another thread:
.x-section [class^=“x-bg”][data-x-params*=“parallax”] {
background-attachment: fixed;
}

It seems to work fine in Chrome and Edge, but Firefox it breaks and gives the error:
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

Home - American Yard Restoration

Any ideas?
Thank you.

[tristup]

Hi @johnnyp14,

Thanks for reaching out.
The background-attachment: fixed is not the parallax, it is just fixed there on the device’s viewport relative to the document. That might be the issue with the Mozilla Firefox, I would suggest you go through the following article which may help you to resolve the issue.

https://stackoverflow.com/questions/44096002/background-attachment-fixed-not-working-in-firefox#:~:text=1%20Answer&text=The%20very%20first%20moment%20I,fixed%20instantly%20back%20to%20normal.
https://stackoverflow.com/questions/51211060/background-attachment-fixed-is-not-working-in-firefox/51211322

Hope it helps.
Thanks

[johnnyp14]

Thanks for the reply. I’m still a bit confused though. I’m referring to this thread:

Parallax Effect in X Pro

Glad it helped, @gregorylmartin. Everything in the theme has a purpose though. To see why the parallax setting starts at 150, please watch the background parallax introduction at https://theme.co/apex/forum#background-addendum. It’s best to watch rather than explaining it here so you see the actual parallax action being demoed. The Parallax effect you wanted is also available if you use the Classic Section (no CSS required). To achieve that in V2 though, you need the background-attachment code…

The accepted solution doesn’t appear to work in Firefox.

[tristup]

Hi @johnnyp14,

Can you please provide login credentials for your site on a secure note to examine the settings further, please include the following details:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[nabeel]

Hey @johnnyp14,

Thank you for providing the credentials. Try avoiding the custom CSS because sooner or later it always creates issues. You should use the native parallax feature instead. To enable the parallax effect, inspect your Section in Cornerstone/Content Builder and turn on the Background Advanced settings (see screenshot)

Now Under Background Lower Layer or Background Upper Layer choose the Type Background Image and turn On the Parallax option (see screenshot)

You can adjust the parallax settings as you need. Hope this helps!

[johnnyp14]

Sorry, but that is not a solution. I am literally using the code provided by themeco. The method you just described does not have the same effect as desired. I do not want the image to scroll, I want it to remain fixed. The parallax scroll has been changed depending on if you use the classic or current elements.

[ruenel]

Hello @johnnyp14,

The code you used is valid and correct:

.x-section [class^="x-bg"][data-x-params*="parallax"] {
    background-attachment: fixed;
}

In Firefox, it does not work because of the transform property. Simply update your code and use this:

.x-section [class^="x-bg"][data-x-params*="parallax"] {
    background-attachment: fixed;
    transform: none !important;
}

Feel free to make adjustments as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

[johnnyp14]

Thank you. I’ll give it a try.
Feature request: you have the classic parallax where the background is fixed. The new parallax moves with the page on there should be a toggle so it’s consistent🙂

[marc_a]

HI @johnnyp14,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.