Issue with Enfold one-page restaurant demo on mobile

Hi Guys – was this what you wanted? Any updates?

Thanks.

Just as a tip, I found out is also possible to use this as a workaround within your custom javascript (should be placed within a jQuery document ready block):

    var deviceAgent = navigator.userAgent.toLowerCase(),
         agentID = deviceAgent.match(/(windows phone|iemobile)/);

    if(agentID) {
        $(".av-parallax-inner").unwrap();
    }  

Tested on lumia 640, seems to work. It removes the parallax element but keeps the image.

Hi guys – sorry to report that neither of these make any difference to fixed bg issue. Have left the second option in place on the demo site for you reference and code in use below (in case I’ve made an error as my php is rudimentary).

functions.php now looks like this:

<?php

// windows phone background fix
add_action('wp_footer', 'ava_windows_fix');
function ava_windows_fix(){
?>
<script type="text/javascript">
(function($) {
    function a() {
		var ua 	     = navigator.userAgent,
	    	ie 	 	 = new RegExp("IEMobile"),
	        isMobile = ie.test(ua);

        if(isMobile && $('.avia-section .av-parallax').length >= 1) {
            $('.avia-section').each(function() {
                var section  = $(this),
                    parallax = section.find('.av-parallax-inner'),
                    pbg      = $(parallax).attr('style').split(';'),
                    bg       = ''.
                    bgurl    = '';

                if($(parallax).length != 1) return;

                $(pbg).each(function(key, value) {
                    if(value.indexOf('background-image') != -1) {
                        bg = value;
                    }
                });

                bgurl = bg.split(' ');

                $(bgurl).each(function(key, value) {
                    if(value.indexOf('url') != -1) {
                        bgurl = value;
                    }
                });

                $(this).find('.av-parallax').remove();
                $(this).removeAttr('style');
                $(this).css({
                    "background-image" : bgurl,
                    "background-attachment" : "scroll",
                    "background-position" : "center center"
                });
            });
        }
    }

    a();
})(jQuery);
</script>

<?php
}

// windows phone fixed background fix
add_action('wp_footer', 'ava_custom_script_bgfixed');
function ava_custom_script_bgfixed(){
?>
<script type="text/javascript">
(function($) {
    function b() {
		var ua 	     = navigator.userAgent,
	    	ie 	 	 = new RegExp("IEMobile"),
	        isMobile = ie.test(ua);

                if(isMobile) {
                      $('.avia-bg-style-fixed').removeClass('avia-full-stretch');
                      $('.avia-bg-style-fixed').addClass('avia-ie-stretch');
                      $('.avia-bg-style-fixed').css('background-attachment', '');
                      $('.avia-bg-style-fixed').css('background-attachment', 'scroll');                                                      
		}
    }

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

And style.css like this:

/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/*Add your own styles here:*/

.avia-ie-stretch {
background-size: 100% 100% !important;
}

Hey Ismael – yup, no browser based emulator I’ve tried will reproduce the issue (though Browserstack will).

Also have not great news on the parallax fix – it works if there is only one section with a parallax background on a page but if there is another it doesn’t (same issue, second parallax background fills screen). Sigh – so close.

Thanks, M

Subsequently addressed in other thread – all now resolved. Thanks.