Non-Apple Mobile Devices: Cannot Scroll Site

Homepage Forums WP Travel Non-Apple Mobile Devices: Cannot Scroll Site

This topic contains 11 replies, has 3 voices, and was last updated by  wensolutions 1 month, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #19771

    MountainTraveler
    Participant

    Hey @support:

    Customer discovered a strange occurrence: The site does not scroll on non-Apple devices.

    Site is running Travel Base Pro as a theme, WP Travel, and WP Utilities.

    We did cross-device testing:
    Samsung mobile device + Chrome = cannot scroll
    Google Pixel + Chrome and Firefox = cannot scroll
    Apple devices + Chrome and Safari = site scrolls

    I deactivated all plugins, except WP Travel plugins, Contact Form 7, Askimet, Yoast, and Loco Translate, but this did not address the issue.

    This is also occurs on the mobile and tablet versions of the WordPress Customizer. Once we choose either of those devices within the Customizer interface (on desktop/laptop), the site is not scrollable.

    Note we also tested whether the site functions on a Windows desktop with both Chrome and Firefox as it does with Apple and Safari/Chrome. No issues in either case.

    We ran an error check in Google Inspect and couldn’t find

    Yet, on Android devices, the issue persists.

    #19813

    wensolutions
    Keymaster

    Hello,

    When we tested your site in our android device the site was working fine as you can see in the screen record below:

    https://www.loom.com/share/ee7df009f99e4ead823a48c6b807329f

    https://www.loom.com/share/866d32137561499983aa4e24bf0b5371

    So please once deactivate the WP Travel plugin as well and switch to the default theme and check the scrolling issue. If the issue is found with this setting then, the issue is not related to the WP Travel plugin.

    Please let us know after the testing.

    Thank you.

    #19826

    MountainTraveler
    Participant

    Hey @support:

    Thanks for the follow up, and for taking a look.

    First, apologies on my end for any misunderstanding regarding the domain where your software solutions are deployed!

    The site you inspected is the parent domain. This domain does not use WP Travel software.

    https://trips[dot]sanooktiew[dot]com is the subdomain where Travel Base Pro, WP Travel, and WP Utilities are currently deployed.

    The subdomain is where we are encountering the issue with Android and the Customizer as outlined above in this thread.

    I had the Data Science Engineering Lead for a Unicorn take a look on his Google Pixel, and he too was surprised this is happening.

    Additional thoughts?

    #19829

    Support Team
    Keymaster

    Hello

    This issue is quite unlikely to occur and it even didn’t appeared in our testing sites. However, please add the below given CSS snippet and verify if this resolves the issue :

    body {
    height: 100vh;
    }

    Hope this helps

    Feel free to reach us for any further query/confusion.

    Regards!

    #19935

    MountainTraveler
    Participant

    Hey @support:

    Thanks for the follow up.

    I have been vigorously testing on Android devices, from Pixel 2 to Sony to Asus to Samsung, and the site does not scroll.

    Also, I deactivated all the plugins except for WP Travel plugins and Loco Translate. Additionally, multiple browsers on the Android devices were used to test.

    By inputting the snippet above, the site breaks.

    Would be great to address this ASAP.

    Thoughts?

    #19936

    Support Team
    Keymaster

    Hello

    Have you added the snippet in the Additional CSS section ?

    Please add the given CSS snippet by going to Admin Panel > Appearance > Customize > Additional CSS

    It is a very rare case for a CSS code to break a site. kindly verify if this helps.

    Regards!

    #19961

    MountainTraveler
    Participant

    Hey @support:

    Thanks for the quick follow up.

    My reply #19935 was poorly framed. I should have shared that by inputting the snippet above, the layout of the site was broken but the site itself was not broken.

    However, this turned out to be a connectivity issues: I re-tested the above snippet with the following results:
    1. The site now scrolls fluidly on Android mobile devices and the mobile version of the WordPress Customizer.
    2. That said, adding the 100vh rule had the following effects:
    A) on Apple mobile devices, the site no longer scrolls fluidly but does scroll. It is a “stiff” scroll.
    B) on the Itineraries page when clicking the Book Now button above the Trip Code, the page will not scroll to the booking form where the user inputs the number of trip participants. Clicking the Book Now button opens that section, so only the scrolling function is affected.
    C) the 100vh rule interferes with the share-on-social media plugin. Not the end of the world, but still a consequence observed.

    Have any thoughts about the above?

    Thanks again for the follow up!

    #19968

    Support Team
    Keymaster

    Hello

    We inspected your site in detail. Please remove the below mentioned CSS snippets from your site and verify if it helps.

    Snippet 1:

    body {
    height: 100vh;
    }

    Snippet 2 :

    @media screen and (max-width: 782px){
        html{
            overflow: hidden;
        }
    }

    Please let us know if this technique helps.

    Feel free to reach us for any further query/confusion.

    Regards!

    #19996

    MountainTraveler
    Participant

    Hey @support:

    Thanks for the quick follow up, and for the suggested solution.

    Experimenting with these suggestions, I discovered that marking out the snippet

    @media screen and (max-width: 782px){
        html{
            overflow: hidden;
        }
    }

    But keeping the snippet

    body {
    height: 100vh;
    }

    was the fix for the scrolling issue. Both Android and Apple mobile devices now scroll fluidly, and the Book Now icon on Itineraries functions correctly.

    That said, when clicking the Enquiry icon on Android mobile Chrome, the Enquiry form does not scroll so that the user can populate it with questions and other data.

    Small issue when compared to the fix for the scrolling issue, but if you have further thoughts, I would be happy to hear them.

    As always, thanks so much!

    #19998

    Support Team
    Keymaster

    Hello

    Glad we could help you.

    For the scroll problem in Trip Enquiry form, please add the below given code snippet in Additional CSS section

     .mfp-container {
        overflow: scroll;
     }

    Hope this helps

    Feel free to reach us for any further query/confusion.

    Regards!

    #20009

    MountainTraveler
    Participant

    Awesome turnaround time on the support ticket!

    I dropped the snippet into the relevant Media Query and that did the trick!

    Thanks!

    #20010

    wensolutions
    Keymaster

    Hello

    Glad that the snippet worked for you.

    Also, thank you for your kindest reviews. It means a lot to us.

    For any further query/confusion, feel free to reach back to us.

    Best Regards!

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

You must be logged in to reply to this topic.