Parallax Issues

Support
#1

Hey,

I’m using a content band on a lot of pages with parallax feature for my website and I just noticed tonight that the site looks completely different in Firefox, why is that? It is like the parallax feature isn’t working in that browser. It looks good using Chrome or Safari so I’m a bit confused.

I’m using a content band instead of adding the image as a background because it is not jumping that way. It looks so bad when you load the site and the image jumps. I have read that it is “a common problem with parallax” so assume nothing can’t be done about that – hence why I’m using content band :slight_smile:

Let me know if there’s a fix to the firefox issue. You can check out the site here: http://22e.ba7.myftpupload.com/
Homepage is working fine but no other pages.

Thanks!

Ann

#2

Hi there,

Thanks for writing in.

What OS and Firefox version you’re testing it with? Parallax works on all of my firefox browsers (Mac/Windows). Or maybe it’s in different page or specific section?

Thanks!

#3

I’m using Firefox 55.0.3. The parallax works for the second image but not the very first image. Is it really for you?

#4

Hi again,

I checked and it’s not working for me in FF. Please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

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

Hope this helps!

#5

No that did not do anything :frowning:

#6

Hi again,

I checked your site in Firefox and it’s working fine for me now. Try clearing out the cache and reload the site.

Let us know how this goes!

#7

I did and it is not working. The homepage image does work, but not other pages. And I am referring to the header image on the pages below:

http://c02.847.myftpupload.com/air-charter/
http://c02.847.myftpupload.com/aircraft-management/
http://c02.847.myftpupload.com/aircraft-maintenance/
http://c02.847.myftpupload.com/aircraft-sales-acquisition/

Ann

#8

Hey there,

The parallax works but in Firefox, it is very subtle. This is because the scroll behavior, the background position, and background attachment works differently in Firefox than in Chrome. It holds true in other browsers. Every browser has it’s quirks. You’ll see in this screencast that it technically works https://youtu.be/7dj6ohddo-Q. It’s just very subtle to if you look at the parallax effect when viewing the image.

Also, your section’s background almost has the same aspect ratio as your section. Your section needs to be shorter than the aspect ratio of your background. That is why the parallax of your other section is “visibly working”. Compare this background image of your short section

http://c02.847.myftpupload.com/wp-content/uploads/Homepage.jpg

than this background image of your header section.

http://c02.847.myftpupload.com/wp-content/uploads/Gradient-BG-4.jpg


Notice that your header image is shorter and it’s almost the same as your section. You must use a taller image.

Thanks.