Mobile Scrolling gets Very Sticky

Hi,

I have not seen this in the Support Forum, but I have disabled every plugin installed and the results were the exact same. When on our website for desktop, tips4gamers.com, it scrolls up and down as it should. However, when on mobile you go to scroll down (or up) and it doesn’t scroll down very easily. Instead, you have to move your thumb up or down on the screen a few times for it to scroll down or up. Not sure why it is doing this? I thought for sure it could be a plugin but it wasn’t.

Also, when installing the provided smooth scroll plugin, it is pretty choppy on desktop.

This is the case for both iPhone and Android. It seems to scroll fine when on an iPad or Tablet.

Thanks and regards,

Josh

Hello Josh,

Thanks for writing in! I have inspected your site and I found a JS error in the console.

A bad HTTP response code (404) was received when fetching the script.

I also noticed that a certain JS script is adding height: auto !important; to each of the container elements on the page. I would recommend that you temporarily remove your custom JS scripts and test again for a conflict. One of the JS script you have added could be the culprit of this issue.

Please let us know how it goes.

Hi Rue,

Thank you for this! Unfortunately, I am not sure what to do from here or where to start or look. I am still learning so everything you have mentioned is not something I can do anything about. I contacted my host, however, they said that was out of their scope of work.

If you can guide me in the right direction I would greatly appreciate you!

Thanks and regards,

Josh

Hey Josh,

I am curious with the custom inline css adding height to the elements. Would you mind providing us access to your site so that we can check your settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you in advance.

Hello Josh,

I have logged in to your site and look for the JS script. It is not in the Theme Options, Header or Footer area. Did you add anything in your child theme? Perhaps this is caused by one of your plugins. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If the issue still exists, please re install Pro Theme There might be some files that were corrupted. You can review our update guide and see the Manual Update section to reinstall Pro.

Please let us know how it goes.

Hi Rue,

I have added nothing to the child theme. Before contacting you guys I deactivated every plugin and nothing changed. I installed the theme via a staging site then made it live. That could have corrupted something? Not sure but I will definitely reinstall it. Is there any specific way I need to do it or do I just uninstall it, delete it, then reinstall it?

I just uninstalled, deleted, then reinstalled it and the issue is still there. Not sure what to do.

Hello Josh,

May I ask permission to turn on the Under Construction mode in your site and test for a plugin conflict again in your site?

Kindly let me know.

Yeah, that would be fine by me. Thank you.

Hello Josh,

I have investigated the issue and tested for a plugin conflict. It turns out that “Penci Framework” plugin is adding the height: auto !important; to most of the containers in the page which is causing the issue. I am not sure where or what is the purpose of this plugin and hot it relates to your site. I would recommend that you temporarily disable this plugin and test your site again.

Hope this helps.

1 Like

Hi Rue,

I have disabled that plugin but it the issue is still there. When I scroll down on mobile then go to scroll back up it just stops. I end up having to scroll twice in order to get it moving and it’s stuck if trying to scroll up and down at the same time. This only happens when trying to scroll the opposite way.

That plugin was to our previous theme. They had a lot of templates for Visual Composer. If I deactivate it then there are a bunch of pages that would have no content just short codes. The Pro theme is great and there is an unlimited amount of possibilities with it it’s kind of overwhelming. Before I got rid of that plugin I was trying to figure out how to add my own templates so that we can make the homepage and other pages have blog posts the way we would like it as well as other content mixed in (maybe some tabs) such as topics and forums, etc.

Thank you for all of your help.

Hi Joshua,

Just to make sure that we are on the same page. Please consider that the scrolling problem on the phone is not caused by our theme code. I checked so many other websites that are coded with our theme and that problem does not exist.

So, this is something related to your installation which you need to find out.

I went over your website and tried to rule out any possible case. That is why I added a sample page called Pro-Test. And I selected the No Container - No Header, No Footer Page Template to make sure only the content shows. I also did not use the Pro Content Builder and used the native WordPress Gutenberg editor to add simple HTML code that adds background colors so that I can check.

The problem was still there even when I took the steps above. That is why I started to disable the plugins one by one. As soon as I disabled the Ad Inserter plugin, that double scroll problem went away on my phone.

Please consider that this problem might be the accumulation of the different plugins that you used, so I report my experience on my test.

Thank you.

Hi Christopher,

Thank you very much for your help. We really appreciate it. I have to do a little more digging or hire a developer to help find and fix this issue. We looked into it with a developer for a quote and they believe the issue is “I think I’ve figured out the issue and it’s the two scrollbars on the page it should be fixable” and they left a link to the image. https://imgur.com/vgUIUOI

I cannot reproduce this issue and I have no idea how they are seeing that second scroll bar. The header on the left in the screenshot I turned off for mobile, so not sure how they are seeing that either. I do not know if what they are saying is legitimate or not? If it is, is it part of the theme?

Thanks and regards,

Josh

Hello Josh,

I have checked your site again and I do not see duplicate scrollbars.

Meanwhile, since you are using SiteGround, could you please disable the Supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

You may need to clear the browser cache too or use private browsing mode and test your site again.

Hope this helps.

1 Like

Hi Rue,

I did not see them either. I have no idea what that guy was talking about.

I deactivated the SuperCacher but the problem is still there. What is the reason you recommend leaving it off? I will do a lot of digging and learning and I will figure it out, hopefully.

Thank you guys for all of your help. It is much appreciated.

Josh

Hi Rue,

There was one more thing but it was unrelated to this topic. If you would like me to start a new topic just let me know.

The issue was the “Leave a comment” link on every post such as https://www.tips4gamers.com/a-plague-tale-innocence-experience-crafting-alchemy-and-more-in-the-gameplay-overview-trailer/. It takes me nowhere. It adds to the end of the URL “#respond” but nothing ever happens.

Thanks and regards,

Josh

Hi dear Joshua,

I wonder if you read my reply? I already found the problem cause and that was the plugin I have mentioned. The sample page that I provided exclusively shows that.

This shows clearly that the problem you have mentioned on the mobile which you can not scroll back up for the first time was caused by the plugin, as soon as I disabled that I could scroll back up with one tap.

As this is not a theme related issue, we are not in a position to comment about the developer you talked about.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you for your understanding.

Hi Christopher,

I did indeed read your reply. However, before contacting you guys, I deactivated all plugins, cleared the cache, went on a different browser and the issue was still there. With that being said, after reading your reply, I deactivated the Ad Inserter plugin, cleared the cache, went on a different browser, and the issue was still there. My confidence in your findings was not there because nothing had changed. I trust that you guys did every test you needed to do in order to figure out that it did not have anything to do with the theme. I am just confused about the issue still being there even after deactivating all of my plugins. Maybe I am doing something wrong?

I will open another thread for the other inquiry.

Thank you guys for doing the investigating and leaving your suggestions! We really appreciate you guys for your hard work.

Thanks and regards,

Josh

Hi Josh,

It is a privilege to serve our customers and we will do our best to find the problem cause on your installation.
I went to your website and spent a lot of time to find the problem cause.

I still stand by my previous finding that the Ad Inserter is the cause of the problem. But I also see that the footer is another problem cause.

Let’s do this test together to make sure we are on the same page. I added another test page which you can find the link in a Secure Note. Please go to that page using the Pro editor and check the cases below:

  • Disable the Ad Inserter plugin.
  • Go to the page in question using the Pro Editor and from the bottom left section of the screen click the Settings icon.
  • Go to Page Settings tab and set the Page Template Option to Blank - Container - No Header, No Footer.
  • Save the page.

If you check the page after following the steps above you will see that the problem is gone. In this case, there is no Header and Footer and there is only the content of the page. Please kindly get back to us and confirm this to make sure we are on the same page.

Then do another test, go to the same place and this time please change the Page Template to Blank - Container - Header, No Footer. In this case, the header is there but there is no footer. You should again, see no problems. Please confirm this case too.

Now the other test, change the Page Template to Blank - Container - No Header, Footer. This time there is no Header but the footer is there. This time the problem comes back!

So what I concluded at this stage is that there is a problem on the footer which you need to find the cause. Maybe you used something there that causes the problem. Please do the test with the Ad Inserter plugin disabled. Because if you enable that plugin the problem is there no matter you show the header or footer or not.

Hope we could give you a deep debug case that you can check and follow up to find the problem cause.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.