Color section fixed background doesn't work on iPhone

Hey Webamorfosi,

If you need greater control over the behaviour on mobile, then you could copy the Color Section and use an image better adapted to mobile screens in the new one. You can hide/show the correct one using the Screen Options settings in the element settings.

Best regards,
Rikard

Hi,

Thanks for the update.

A quick explanation why fixed elements are a bit erratic on mobile view.

// https://kriesi.at/support/topic/fullscreen-slider-fixed-position-doesnt-work-in-mobile/#post-997863

One of the users provided a fix that converts fixed to static backgrounds on mobile view.

// https://kriesi.at/support/topic/playing-with-new-demos/#post-871865

Best regards,
Ismael

Hi,

They are actually not the same. They set the actual container, not the background image, as a “fixed” element and change its position to “relative” once the scroll position is equal or higher than the view port height on scroll. You can do the same with the theme if you want to accomplish the same effect. Add two color sections, set both height minimum height to 100% of the browser height, add the background image to the second color section and then apply a unique Section ID to it –e.g., “fixed-section”. After that, add this script in the functions.php file.

add_action('wp_footer', 'avia_scroll_fixed_section', 9999);
function avia_scroll_fixed_section() {
    ?>
    <script>
        (function($) {
            $(document).ready(function () {
                var fixed = $('#fixed-section');

                function avia_scroll_fixed_section()
                {
                    set_status = function()
                    {
                        var st = $(window).scrollTop();
                        var h = $(window).height();

                        console.log(h, st);

                        if(st >= h)
                        {
                            fixed.addClass('fixed-section-arrived');   
                        } else {
                            fixed.removeClass('fixed-section-arrived');
                        }
                    };

                    $(window).on( 'scroll',  function(){ window.requestAnimationFrame( set_status )} );
                    set_status();
                }

                avia_scroll_fixed_section();
            });
        })(jQuery);
    </script>
    <?php
}

And this css code on the Quick CSS field:

#fixed-section {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  position: fixed;
  height: 100vh;
  will-change: transform;
}

.fixed-section-arrived {
  position: static !important;
}

Don’t forget to remove the browser prior to checking the page.

Best regards,
Ismael

Hi,

Thanks for the update, we’ll keep the thread open in case you should need any further help.

Best regards,
Rikard

Hi,

Fixed background are disabled on mobile devices by default. You may need to do this modification…

// https://kriesi.at/support/topic/playing-with-new-demos/#post-871865

Best regards,
Ismael