[Sakuna]

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.

[wensolutions]

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.

[Sakuna]

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?

[Support Team]

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!

[Sakuna]

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?

[Support Team]

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!

[Sakuna]

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!

[Support Team]

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!

[Sakuna]

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!

[Support Team]

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!

[Sakuna]

Awesome turnaround time on the support ticket!

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

Thanks!

[wensolutions]

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!

[erinisland]

Hi @support

Hoping for some urgent help.

1. I am using Travel Log and WP Travel Plugin.
On my mobile devices (have tested on 3 different devices 2 x mobile 1 x tablet) my site loads but it won’t scroll.

I’ve tried inserting the code snippets above but nothing Im doing is working.

2. How can I place Per Person next to the price on the trip page heading?

Please help! – http://www.ionianactivities.gr

Thanks

[erinisland]

Hello again @support

I deactivated the WP plugin and tested and my website displays correctly on mobile… Reactivated the plug in and it won’t scroll again on mobile devices.

I really need to get this fixed asap as the website is not usable for visitors in this state.

Thanks!

[wensolutions]

Hello,

Actually, when we inspected in our side, everything is working fine.

Also, third party plugin can be one of the leading cause for uncertain behavior so please once deactivate all the third party plugins and verify the issue activating WP Travel plugin only.

Regarding placing Per Person next to the price, can you please provide us with specific screenshot of the section you are referring to so that we can help you?

Regards.

[Author]

Posts