Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #559330

    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/ (Purchase code hidden if logged out) -android/ ,
    https://kriesi.at/support/topic/ (Purchase code hidden if logged out) / ,
    https://kriesi.at/support/topic/ (Purchase code hidden if logged out) / ,
    https://kriesi.at/support/topic/ (Purchase code hidden if logged out) /

    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 1 year, 10 months ago by  Yigit.
    #559356

    Hey Stefan!

    Thank you for sharing your solution and letting other users know :)
    I will let our devs know about your solution :)

    Regards,
    Yigit

    #559387

    Hey Yigit,

    you’re welcome, thanks. Maybe you could leave a note here, when a fallback or other related solution moves into an Enfold release.

    Regards,
    Stefan

    #559397

    Hi!

    I noted your thread, I or any other moderator will update you :)

    Cheers!
    Yigit

    #559404

    thanks!

    Cheers
    Stefan

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Workaround for Parallax Bug on Firefox on Android – Parallax fallback via CSS’ is closed to new replies.