Parallax not working on edge and firefox

[Jimmmmmer]

Hi there

I have parallax working fine on chrome but it does not work on edge or firefox Both are latest editions.

Please could you advise.

Thank you

[nabeel]

Hi Eileen,

Thank you for reaching out to us. I checked your site and it appears the parallax is not working in Chrome either correctly in your setup, the reason you see it working in Chrome is the background-attachment: fixed; property but this breaks in Firefox and Edge due to some browsers known bug with CSS transforms combined with background-attachment property (see https://bugzilla.mozilla.org/show_bug.cgi?id=1292499)

I did my tests in local setup and it works correctly in both Chrome and Firefox so it seems like an issue with your current setup. Can you please check for the following first:

1. I see you’ve a cache plugin active and the content is being served by the cache as well, clear your plugin’s cache including browser cache then deactivate your caching plugin and other optimization plugins. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

2. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

3. Remove custom CSS, JavaScript and deactivate your child theme if using and switch to parent theme (take a complete backup first before removing the custom codes).

If the issue persists then please take a look at this guide here https://theme.co/docs/common-issues

If nothing works then please get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

[Jimmmmmer]

Hi Nabeel

Thank you for your detailed reply.

If I dont use the css background-attachment: fixed; then what should I use because if I take this out it no longer works at all on anything?

Clearing cache does not do anything.

I will try the plugins but if the above css is not in then?

Thanks for all your help.

Kind rgards

[ruenel]

Hello Eileen,

Thanks for updating in! Please remove the custom css code and then in your background image parallax settings, enable the “Reverse” option.

You may also increase the layer size. If this is not helping, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Regards.

[Jimmmmmer]

Thanks Ruenel Here is the login

[rad]

Hi Eileen,

I disabled the custom CSS fixed background, it’s not needed. The reason you’re not seeing a parallax effect is because you set the size to 100%.

This means the background size is equal to the container size, if they are both equal then there is no enough offset for it to move. I set it to 150% and it’s working, you can try it, or you may increase it to 200% if you wish a more distinguished movement upon scrolling.

The background-attachment: fixed is not parallax, it’s just fixed there on the device’s viewport relative to document. That’s going to have issues with mobile. The parallax should be relative to its container (eg. section) instead of document (entire body). And parallax movement is based on the distance of the offsets which is the difference of the image and container’s dimension.

Thanks!

[Jimmmmmer]

Hi Rad

Thank you soooo much. I was very close as tried the 150 % and because it did not move didnt try any further. Have set at 250% which is great.

Thank you for all your help it works fine now on all browsers.

Kind regards

Eileen

[christopher]

Glad that we could be of help