Workaround for Parallax Bug on Firefox on Android – Parallax fallback via CSS

Hello Everyone,

Recently i came across the problem, that background images of color-sections will spread over the whole page, when using Firefox on Android.
I observed the bug with color-section’s background-attachement option set to parallax and fixed. scroll seems to work.

I am using a CSS workaround which detects Firefox, sets the Parallax Image’s Opacity to 0 and places an overlaying image as Background for the color-section. This image is set to scroll (fixed to content).

– the positive side effect is, that it is possible to style the fallback image individually from the parallax version. (e.g. alignment, size and even image file)
– a downside is, that the replacement image needs to be set in CSS.
– another resulting downside is, that it has to be done for every affected color section.
– and (another downside) it switches to the fallback on all firefox browsers, even on desktops, because it seems to be pretty impossible to detect the device type via CSS.

Here is the CSS i use for now. The color-section id needs to be set to your_colorsection_id via the Avia Layout Builder Settings.

/* set parallax Sections to scroll for firefox, to prevent issues with firefox on android */

/* detect firefox */
@-moz-document url-prefix() {
  /* set new fallback image */
  #your_colorsection_id {
    background-image: url(<your_image_url/filename.jpg>) !important;
    background-attachment: scroll;
    background-position: center;
  }
  /* disable the parallax image */
  #your_colorsection_id .active-parallax {
    opacity: 0;
  }
}

I found similar problems unresolved in the following Threads:
https://kriesi.at/support/topic/mobile-view-parallax-background-bugs-android/ ,
https://kriesi.at/support/topic/problem-on-all-firefox-browsers/ ,
https://kriesi.at/support/topic/firefox-mobile-fix-follow-up/ ,
https://kriesi.at/support/topic/browser-support-on-mobile-devices/

I found the Firefox detection code line here (And i do not fully understand how this works):
http://stackoverflow.com/a/5874150

My affected page where i implemented that is this one:
http://www.schwebewerk.com/service/

I hope this might help someone. Please let me know if you found a more elegant solution or if you found a bug in my one.

Cheers
Stefan

• This topic was modified 8 years, 11 months ago by Yigit.