Site bouncing and shaking in some browsers

Hi there, while working on this new site, we noticed some bouncing and shaking while on the site. We first thought it was an issue with the browser/computer, but were able to replicate it on other browsers. We asked Flywheel to look into it and this is what they said.

It looks like that “jumping” effect is coming from some theme CSS.

The theme seems to be using this CSS file for its styling:

** **/wp-content/themes/pro/framework/dist/css/site/stacks/integrity-light.css?ver=2.3.8** **

That file has a line that sets the body element’s overflow-x property to hidden. If I remove that line of CSS (in Chrome dev tools, just for testing), everything seems to work well.

Alternatively, if I change the body, #x-root or #x-site elements’ overflow-y property value to hidden, that also solves the issue.

So long story short: it’s some disagreeable CSS that’s causing stuff to scroll when it shouldn’t, and when that stuff should just be hidden from view. I’m sure you’ve noticed there’s a second vertical scrollbar jumping into view when the screen jumps; that’s the cause. Any of the above solutions worked in my personal testing; it’s just a matter of getting the theme to treat overflowing elements properly.

I looked through the custom css and cannot find anything that matches that. Can you look into this and see how we can fix this?

Hi @Christo9878,

Thank you for reaching out to us. I believe it’s happening due to the footer setup. Try this, inspect your Footer bar and turn on the Content Scrolling option (see screenshots)

If this doesn’t work then please check for the following first:

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

  2. If you’re using a caching plugin, clear all caches including browser cache then deactivate your caching plugin and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Test 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.

  5. Remove custom CSS, JavaScript and deactivate your child theme and switch to parent theme (take a complete backup first).

Let us know how this goes!

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